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

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

const PAGE_SIZE = 6;

export default async function ProductsPage({
  searchParams,
}: {
  searchParams: Promise<{ page?: string }>;
}) {
  const { page } = await searchParams;
  const totalPages = Math.max(1, Math.ceil(products.length / PAGE_SIZE));
  const currentPage = Math.min(
    Math.max(1, Number(page) || 1),
    totalPages
  );
  const start = (currentPage - 1) * PAGE_SIZE;
  const pageItems = products.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((product) => (
              <ProductCard key={product.id} product={product} />
            ))}
          </div>

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