import { CatalogCard, EmptyState } from "@/components/CatalogCard";
import { PageHero } from "@/components/PageHero";
import { Reveal } from "@/components/Reveal";
import { displayTitle, excerptOf, getPortfolios, portfolioPath } from "@/lib/meshkee";
import { pageMetadata } from "@/lib/seo";

export const metadata = pageMetadata({
  title: "Projects",
  description:
    "Selected architecture projects by Khiyal Architecture Studio, from villas and residential buildings to offices and commercial spaces shaped with clients.",
  path: "/portfolios",
  image: "/images/slider/hayat.jpg",
  imageAlt: "Architecture projects by Khiyal Studio",
});

export default async function PortfoliosPage({
  searchParams,
}: {
  searchParams: Promise<{ page?: string }>;
}) {
  const { page } = await searchParams;
  const { items } = await getPortfolios({ page: Math.max(1, Number(page) || 1), pageSize: 12 });

  return (
    <main>
      <PageHero accent="our" title="projects" subtitle="Selected architecture works" />
      <section className="section dotted">
        <Reveal className="container-site">
          {items.length === 0 ? (
            <EmptyState>No projects published yet.</EmptyState>
          ) : (
            <div className="catalog-grid">
              {items.map((item) => (
                <CatalogCard
                  key={item.id}
                  href={portfolioPath(item)}
                  image={item.titleImageUrl}
                  title={displayTitle(item)}
                  excerpt={excerptOf(item)}
                  meta={item.categoryName || "Architecture"}
                />
              ))}
            </div>
          )}
        </Reveal>
      </section>
    </main>
  );
}