import type { Metadata } from "next";
import { PageHero } from "@/components/PageHero";
import { Pagination } from "@/components/Pagination";
import { ProductGrid } from "@/components/ProductGrid";
import { listMappedProducts } from "@/lib/mappers";
import { SITE } from "@/lib/site";

export const metadata: Metadata = {
  title: `محصولات | ${SITE.nameFa}`,
  description: "خرید لوازم ورزشی و کوهنوردی از فروشگاه سالار استور",
  alternates: { canonical: "/products" },
};

type Props = {
  searchParams: Promise<{ q?: string; page?: string }>;
};

export default async function ProductsPage({ searchParams }: Props) {
  const { q, page: pageParam } = await searchParams;
  const page = Math.max(1, Number(pageParam) || 1);
  const pageSize = 16;
  const data = await listMappedProducts({ page, pageSize, name: q });

  const makeHref = (nextPage: number) => {
    const params = new URLSearchParams();
    if (q) params.set("q", q);
    if (nextPage > 1) params.set("page", String(nextPage));
    const query = params.toString();
    return query ? `/products?${query}` : "/products";
  };

  return (
    <>
      <PageHero title={q ? `جستجو: ${q}` : "محصولات"} english="Products" />
      <section className="container-site py-10 md:py-14">
        <ProductGrid products={data.items} />
        <Pagination page={data.page} pageSize={data.pageSize} total={data.total} makeHref={makeHref} />
      </section>
    </>
  );
}