import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { PageShell } from "@/components/layout/PageShell";
import { PageBody } from "@/components/content/PageBody";
import { Reveal } from "@/components/motion/Reveal";
import { getPageBySlug, listPages } from "@/lib/pages";

type Props = { params: Promise<{ slug: string }> };

export async function generateStaticParams() {
  const pages = await listPages({ publishedOnly: true });
  return pages.map((page) => ({ slug: page.slug }));
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const page = await getPageBySlug(slug, { publishedOnly: true });
  if (!page) return { title: "Page not found" };
  return {
    title: page.title,
    description: page.excerpt || undefined,
  };
}

export default async function ContentPageRoute({ params }: Props) {
  const { slug } = await params;
  const page = await getPageBySlug(slug, { publishedOnly: true });
  if (!page) notFound();

  return (
    <PageShell
      crumbs={[
        { label: "Home", href: "/" },
        { label: page.title },
      ]}
      eyebrow="Info"
      title={page.title}
      description={page.excerpt || undefined}
      wide={false}
    >
      <Reveal>
        <article className="rounded-[1.35rem] border border-border bg-card/60 p-6 sm:p-8">
          <PageBody content={page.content} />
          <p className="mt-8 text-xs text-muted">
            Last updated{" "}
            {new Date(page.updatedAt).toLocaleDateString("en-US", {
              year: "numeric",
              month: "long",
              day: "numeric",
            })}
          </p>
        </article>
      </Reveal>
    </PageShell>
  );
}