"use client";
'use strict';

const jsxRuntime = require('react/jsx-runtime');
const context = require('@btst/stack/context');
const carousel = require('../../../../../../../ui/src/components/carousel.cjs');
const postCard = require('./post-card.cjs');
const defaults = require('./defaults.cjs');
const index = require('../../localization/index.cjs');

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

exports.RecentPostsCarousel = RecentPostsCarousel;
