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 { getProducts } from "@/lib/meshkee";

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 requestedPage = Math.max(1, Number(page) || 1);

  const { items, total } = await getProducts({
    page: requestedPage,
    pageSize: PAGE_SIZE,
  });

  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
  const currentPage = Math.min(requestedPage, totalPages);

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

      <section className="py-16 sm:py-20">
        <Container>
          {items.length > 0 ? (
            <>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                {items.map((product) => (
                  <ProductCard key={product.id} product={product} />
                ))}
              </div>

              <Pagination
                currentPage={currentPage}
                totalPages={totalPages}
                basePath="/products"
              />
            </>
          ) : (
            <p className="text-center text-foreground py-10">
              در حال حاضر محصولی برای نمایش وجود ندارد.
            </p>
          )}
        </Container>
      </section>
    </>
  );
}
