"use client";

import {
  useBlog,
  PostList,
  CategoryFilter,
  SortButton,
  BlogPagination,
  type Post,
} from "@blog";
import { NextBlogProvider } from "@blog/next";
import { blogConfig } from "@/lib/blog-config";

export function BlogList({ initialPosts }: { initialPosts: Post[] }) {
  return (
    <NextBlogProvider config={blogConfig} initialPosts={initialPosts}>
      <BlogListBody />
    </NextBlogProvider>
  );
}

function BlogListBody() {
  const { state, actions, meta } = useBlog();
  return (
    <>
      <SortButton
        sortDateAsc={state.sortDateAsc}
        onSortToggle={actions.toggleSort}
      />
      <CategoryFilter
        availableCategories={meta.availableCategories}
        selectedCategories={state.selectedCategories}
        onCategoryToggle={actions.setCategories}
      />
      <PostList
        posts={state.posts}
        onCategoryClick={actions.toggleCategory}
        selectedCategories={state.selectedCategories}
      />
      <BlogPagination
        currentPage={state.currentPage}
        totalPages={state.totalPages}
        totalPosts={state.totalPosts}
        postsPerPage={meta.config.postsPerPage}
        onPageChange={actions.changePage}
      />
    </>
  );
}
