import type { Metadata } from "next";
import Image from "next/image";
import { notFound } from "next/navigation";

import { RichContent } from "@/components/rich-content";
import { getAllPortfolio, getPortfolioBySlug, getPrimaryDescription } from "@/lib/site-data";

export function generateStaticParams() {
  return getAllPortfolio().map((entry) => ({ slug: entry.slug }));
}

export function generateMetadata({ params }: { params: { slug: string } }): Metadata {
  const project = getPortfolioBySlug(params.slug);
  return project ? { title: project.title, description: getPrimaryDescription(project) } : {};
}

export default function PortfolioItemPage({ params }: { params: { slug: string } }) {
  const project = getPortfolioBySlug(params.slug);
  if (!project) notFound();

  return (
    <article className="page-enter mx-auto flex w-full max-w-5xl flex-col gap-8 pb-10">
      <header className="surface rounded-[2rem] px-6 py-10 sm:px-10 sm:py-12">
        <p className="text-sm font-medium uppercase tracking-[0.3em] text-stone-500 dark:text-stone-400">Project spotlight</p>
        <h1 className="mt-4 text-4xl font-semibold tracking-tight text-stone-950 dark:text-white sm:text-5xl">{project.title}</h1>
        <p className="mt-5 max-w-3xl text-sm leading-7 text-stone-700 dark:text-stone-300">{project.excerpt || getPrimaryDescription(project)}</p>
        {project.featuredImage ? (
          <div className="relative mt-8 overflow-hidden rounded-[1.75rem] bg-amber-950/[0.04] dark:bg-white/6">
            <Image src={project.featuredImage.url} alt={project.featuredImage.alt || project.title} width={1440} height={900} className="h-auto w-full object-cover" priority />
          </div>
        ) : null}
      </header>

      <section className="surface rounded-[2rem] px-6 py-8 sm:px-10 sm:py-10">
        <RichContent html={project.content} />
      </section>
    </article>
  );
}