import { notFound } from "next/navigation";
import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";

type Params = { slug: string };

export async function generateMetadata({
  params,
}: {
  params: Promise<Params>;
}) {
  const { slug } = await params;
  return { title: slug };
}

export default async function ProjectDetailPage({
  params,
}: {
  params: Promise<Params>;
}) {
  const { slug } = await params;
  if (!slug) notFound();

  return (
    <>
      <SiteHeader />
      <main className="mx-auto max-w-4xl px-6 py-24">
        <span className="mb-4 block font-label text-xs uppercase tracking-[0.4em] text-primary">
          PROJECT //{" "}
          <code className="text-on-surface-variant">{slug}</code>
        </span>
        <h1 className="mb-6 font-headline text-4xl font-bold tracking-tight md:text-6xl">
          Project detail
        </h1>
        <p className="font-body text-lg text-on-surface-variant">
          Slug: <code className="font-label text-primary">{slug}</code>. Body
          will render from the Payload{" "}
          <code className="font-label text-primary">projects</code> collection
          once wired.
        </p>
      </main>
      <SiteFooter />
    </>
  );
}
