"use client";
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { usePluginOverrides, useBasePath } from '@btst/stack/context';
import { Button } from '../../../../../../../ui/src/components/button.mjs';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { DefaultLink } from './defaults.mjs';

function PostNavigation({
  previousPost,
  nextPost,
  ref
}) {
  const { Link } = usePluginOverrides("blog", {
    Link: DefaultLink
  });
  const basePath = useBasePath();
  const blogPath = `${basePath}/blog`;
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    ref && /* @__PURE__ */ jsx("div", { ref }),
    (previousPost || nextPost) && /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx("div", { className: "border-t mt-4 pt-4 w-full" }),
      /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row gap-4 w-full justify-between", children: [
        previousPost ? /* @__PURE__ */ jsx(
          Link,
          {
            "data-testid": "previous-post-link",
            href: `${blogPath}/${previousPost.slug}`,
            className: "flex-1 sm:max-w-1/3",
            children: /* @__PURE__ */ jsx(
              Button,
              {
                variant: "outline",
                className: "w-full justify-start py-4 px-4 whitespace-normal! h-full hover:cursor-pointer",
                children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full min-w-0", children: [
                  /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4 shrink-0" }),
                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start min-w-0 flex-1", children: [
                    /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Previous" }),
                    /* @__PURE__ */ jsx("div", { className: "font-semibold line-clamp-2 text-sm leading-tight transition-colors text-start", children: previousPost.title })
                  ] })
                ] })
              }
            )
          }
        ) : /* @__PURE__ */ jsx("div", { className: "flex-1" }),
        nextPost ? /* @__PURE__ */ jsx(
          Link,
          {
            "data-testid": "next-post-link",
            href: `${blogPath}/${nextPost.slug}`,
            className: "flex-1 sm:max-w-1/3",
            children: /* @__PURE__ */ jsx(
              Button,
              {
                variant: "outline",
                className: "w-full justify-end py-4 px-4 whitespace-normal! h-full hover:cursor-pointer",
                children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full min-w-0", children: [
                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end min-w-0 flex-1", children: [
                    /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Next" }),
                    /* @__PURE__ */ jsx("div", { className: "font-semibold line-clamp-2 text-sm leading-tight transition-colors text-start", children: nextPost.title })
                  ] }),
                  /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })
                ] })
              }
            )
          }
        ) : /* @__PURE__ */ jsx("div", { className: "flex-1" })
      ] })
    ] })
  ] });
}

export { PostNavigation };
