"use client";
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { usePluginOverrides, useBasePath } from '@btst/stack/context';
import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from '../../../../../../../ui/src/components/carousel.mjs';
import { PostCard } from './post-card.mjs';
import { DefaultLink } from './defaults.mjs';
import { BLOG_LOCALIZATION } from '../../localization/index.mjs';

function RecentPostsCarousel({ posts, ref }) {
  const { PostCard: PostCard$1, Link, localization } = usePluginOverrides("blog", {
    PostCard: PostCard,
    Link: DefaultLink,
    localization: BLOG_LOCALIZATION
  });
  const PostCardComponent = PostCard$1 || PostCard;
  const basePath = useBasePath();
  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
    ref && /* @__PURE__ */ jsx("div", { ref }),
    posts && posts.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx("div", { className: "mt-4 py-4 w-full text-start border-t", children: /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-between", children: [
        /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold", children: localization.BLOG_POST_KEEP_READING }),
        /* @__PURE__ */ jsx(
          Link,
          {
            href: `${basePath}/blog`,
            className: "text-sm text-muted-foreground hover:text-foreground transition-colors",
            children: localization.BLOG_POST_VIEW_ALL
          }
        )
      ] }) }),
      /* @__PURE__ */ jsx("div", { "data-testid": "recent-posts-carousel", children: /* @__PURE__ */ jsxs(
        Carousel,
        {
          opts: {
            align: "start",
            loop: false
          },
          className: "w-full",
          children: [
            /* @__PURE__ */ jsx(CarouselContent, { className: "-ml-2 md:-ml-4", children: posts.map((post) => /* @__PURE__ */ jsx(
              CarouselItem,
              {
                className: "pl-2 md:pl-4 md:basis-1/2 lg:basis-1/3",
                children: /* @__PURE__ */ jsx(PostCardComponent, { post })
              },
              post.id
            )) }),
            /* @__PURE__ */ jsx(CarouselPrevious, { className: "-left-4 z-50 hover:cursor-pointer" }),
            /* @__PURE__ */ jsx(CarouselNext, { className: "-right-4 z-50 hover:cursor-pointer" })
          ]
        }
      ) })
    ] })
  ] });
}

export { RecentPostsCarousel };
