import { notFound } from "next/navigation";
import { ArticleCard } from "@/components/article-card";
import { articleInclude } from "@/lib/data";
import { prisma } from "@/lib/prisma";
import { siteMetadata } from "@/lib/seo";

export const dynamic = "force-dynamic";

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const category = await prisma.category.findUnique({ where: { slug } });
  return siteMetadata({
    title: category?.name || "Category",
    description: category?.description || undefined,
    path: `/category/${slug}`
  });
}

export default async function CategoryPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const category = await prisma.category.findUnique({ where: { slug } });
  if (!category) notFound();

  const articles = await prisma.article.findMany({
    where: { status: "PUBLISHED", categoryId: category.id },
    include: articleInclude,
    orderBy: { publishedAt: "desc" },
    take: 24
  });

  return (
    <section className="px-4 py-12 sm:px-6 lg:px-8">
      <div className="mx-auto max-w-7xl">
        <p className="font-display text-xs font-bold uppercase tracking-[.28em]" style={{ color: category.color }}>Category</p>
        <h1 className="mt-3 font-display text-4xl font-black text-white">{category.name}</h1>
        <p className="mt-4 max-w-2xl text-white/62">{category.description}</p>
        <div className="mt-8 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {articles.map((article) => <ArticleCard key={article.id} article={article} />)}
        </div>
      </div>
    </section>
  );
}