import { jsx, jsxs } from 'react/jsx-runtime';
import { usePluginOverrides } from '@btst/stack/context';
import { Button } from '../../../../../../../ui/src/components/button.mjs';
import { EmptyList } from './empty-list.mjs';
import { SearchInput } from './search-input.mjs';
import { PostCard } from './post-card.mjs';
import { BLOG_LOCALIZATION } from '../../localization/index.mjs';

function PostsList({
  posts,
  onLoadMore,
  hasMore,
  isLoadingMore
}) {
  const { localization } = usePluginOverrides("blog", {
    localization: BLOG_LOCALIZATION
  });
  const { PostCard: PostCard$1 } = usePluginOverrides("blog");
  const PostCardComponent = PostCard$1 || PostCard;
  if (posts.length === 0) {
    return /* @__PURE__ */ jsx(EmptyList, { message: localization.BLOG_LIST_EMPTY });
  }
  return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-6", children: [
    /* @__PURE__ */ jsx("div", { className: "flex justify-center pb-6", children: /* @__PURE__ */ jsx(
      SearchInput,
      {
        placeholder: localization.BLOG_LIST_SEARCH_PLACEHOLDER,
        buttonText: localization.BLOG_LIST_SEARCH_BUTTON,
        emptyMessage: localization.BLOG_LIST_SEARCH_EMPTY
      }
    ) }),
    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3", children: posts.map((post) => /* @__PURE__ */ jsx(PostCardComponent, { post }, post.id)) }),
    onLoadMore && hasMore && /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(
      Button,
      {
        onClick: onLoadMore,
        disabled: isLoadingMore,
        variant: "outline",
        size: "lg",
        children: isLoadingMore ? localization.BLOG_LIST_LOADING_MORE : localization.BLOG_LIST_LOAD_MORE
      }
    ) })
  ] });
}

export { PostsList };
