import { notFound } from "next/navigation";

type Params = { slug: string };

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

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

  return (
    <article className="mx-auto max-w-3xl px-6 py-24">
      <span className="mb-4 block font-label text-xs uppercase tracking-[0.4em] text-secondary">
        POST //{" "}
        <code className="text-on-surface-variant">{slug}</code>
      </span>
      <h1 className="display-sm mb-6 text-on-surface">Post detail</h1>
      <p className="body-md">
        Body renders from Payload{" "}
        <code className="font-label text-primary">posts</code> once wired.
      </p>
    </article>
  );
}