import type { Metadata } from "next";
import Container from "@/components/Container";
import PageBanner from "@/components/PageBanner";
import PostCard from "@/components/PostCard";
import Pagination from "@/components/Pagination";
import { posts } from "@/data/posts";

export const metadata: Metadata = {
  title: "مقالات | آراد آریسمان",
  description:
    "مقالات آموزشی درباره تغذیه دام، طیور و زنبور عسل از تیم آراد آریسمان.",
};

const PAGE_SIZE = 6;

export default async function BlogPage({
  searchParams,
}: {
  searchParams: Promise<{ page?: string }>;
}) {
  const { page } = await searchParams;
  const totalPages = Math.max(1, Math.ceil(posts.length / PAGE_SIZE));
  const currentPage = Math.min(Math.max(1, Number(page) || 1), totalPages);
  const start = (currentPage - 1) * PAGE_SIZE;
  const pageItems = posts.slice(start, start + PAGE_SIZE);

  return (
    <>
      <PageBanner
        title="مقالات آراد آریسمان"
        subtitle="نکات آموزشی و تخصصی درباره تغذیه دام، طیور و زنبور عسل"
        breadcrumb="مقالات"
      />

      <section className="py-16 sm:py-20">
        <Container>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {pageItems.map((post) => (
              <PostCard key={post.id} post={post} />
            ))}
          </div>

          <Pagination
            currentPage={currentPage}
            totalPages={totalPages}
            basePath="/blog"
          />
        </Container>
      </section>
    </>
  );
}
