import { jsxs, jsx } from 'react/jsx-runtime';
import { PageHeaderSkeleton } from './page-header-skeleton.mjs';
import { PageLayout } from '../../../../../../../ui/src/components/page-layout.mjs';
import { PostCardSkeleton } from './post-card-skeleton.mjs';
import { Skeleton } from '../../../../../../../ui/src/components/skeleton.mjs';

function ListPageSkeleton() {
  return /* @__PURE__ */ jsxs(PageLayout, { children: [
    /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-3", children: /* @__PURE__ */ jsx(PageHeaderSkeleton, {}) }),
    /* @__PURE__ */ jsx(PostsListSkeleton, { count: 6 })
  ] });
}
function PostsListSkeleton({ count = 6 }) {
  return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-6", children: [
    /* @__PURE__ */ jsx("div", { className: "flex justify-center pb-6", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-md items-center gap-2", children: [
      /* @__PURE__ */ jsx(Skeleton, { className: "h-10 grow rounded-md" }),
      /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-24 rounded-md" })
    ] }) }),
    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(PostCardSkeleton, {}, index)) }),
    /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-40 rounded-md" }) })
  ] });
}

export { ListPageSkeleton };
