import { Footer } from "@/components/Footer";
import { Header } from "@/components/Header";
import { PageHero } from "@/components/PageShared";
import { PortfolioGrid } from "@/components/PortfolioGrid";
import { Pagination } from "@/components/Pagination";
import { DEFAULT_LIST_PAGE_SIZE, listPortfolios } from "@/lib/meshkee";
import type { Metadata } from "next";
import { pageMetadata } from "@/lib/seo";

export const metadata: Metadata = pageMetadata({
  title: "پروژه ها",
  description: "پروژه ها و نمونه کار های شرکت رسام تجارت هواران",
  path: "/portfolios",
});

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

export default async function PortfoliosPage({ searchParams }: PageProps) {
  const params = await searchParams;
  const page = Math.max(1, Number.parseInt(params.page || "1", 10) || 1);
  const pageSize = DEFAULT_LIST_PAGE_SIZE;
  const { items, total } = await listPortfolios({ page, pageSize });

  return (
    <>
      <Header />
      <main>
        <PageHero
          title="پروژه ها"
          titleEn="PROJECTS"
          breadcrumb={[
            { label: "صفحه اصلی", href: "/" },
            { label: "پروژه ها", href: "/portfolios" },
          ]}
        />

        <section className="section">
          <div className="container-page">
            <div className="mb-8 flex justify-center border-b border-[#eee] pb-3">
              <span className="border-b border-[#232323] px-3 pb-2 text-sm font-semibold text-[#232323]">
                همه
              </span>
            </div>
            <PortfolioGrid items={items} />
            <Pagination
              basePath="/portfolios"
              page={page}
              pageSize={pageSize}
              total={total}
            />
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}
