import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";

import { formatDate, getCategories, getCategoryBySlug, getPostsByTerm } from "@/lib/site-data";

export function generateStaticParams() {
  return getCategories().map((term) => ({ slug: term.slug }));
}

export function generateMetadata({ params }: { params: { slug: string } }): Metadata {
  const term = getCategoryBySlug(params.slug);
  return term ? { title: term.name, description: term.description || `Posts filed under ${term.name}.` } : {};
}

export default function CategoryPage({ params }: { params: { slug: string } }) {
  const term = getCategoryBySlug(params.slug);
  if (!term) notFound();
  const posts = getPostsByTerm("category", params.slug);

  return (
    <div className="page-enter space-y-6">
      <section 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">Category</p>
        <h1 className="mt-4 text-4xl font-semibold tracking-tight text-stone-950 dark:text-white">{term.name}</h1>
        {term.description ? <p className="mt-4 max-w-2xl text-sm leading-7 text-stone-700 dark:text-stone-300">{term.description}</p> : null}
      </section>
      <section className="grid gap-4">
        {posts.map((post) => (
          <Link key={post.id} href={`/blog/${post.slug}`} className="surface rounded-[1.5rem] p-6 transition hover:-translate-y-1">
            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-stone-500 dark:text-stone-400">{formatDate(post.date)}</p>
            <h2 className="mt-3 text-2xl font-semibold tracking-tight text-stone-950 dark:text-white">{post.title}</h2>
            <p className="mt-3 text-sm leading-7 text-stone-700 dark:text-stone-300">{post.excerpt}</p>
          </Link>
        ))}
      </section>
    </div>
  );
}