import Link from "next/link";
import { notFound } from "next/navigation";
import { getCategories, getCategory, getProducts } from "@/lib/catalog";
import { Compare } from "@/components/site/Compare";
import { Icon } from "@/components/Icon";

export async function generateMetadata({ params }: { params: Promise<{ category: string }> }) { const c = getCategory((await params).category); return { title: c ? `${c.name} pricing` : "Pricing" }; }
export default async function CategoryPricing({ params }: { params: Promise<{ category: string }> }) {
  const slug = (await params).category, cat = getCategory(slug);
  if (!cat) notFound();
  const products = getProducts({ category: slug }), cats = getCategories();
  return (
    <div className="container-x pb-24 pt-12 sm:pt-16">
      <div className="-mx-5 overflow-x-auto px-5 sm:mx-0 sm:px-0"><div className="flex w-max gap-2 sm:w-auto sm:flex-wrap sm:justify-center">
        <Link href="/pricing" className="btn btn-ghost btn-sm">← All pricing</Link>
        {cats.map((c) => <Link key={c.slug} href={`/pricing/${c.slug}`} className={`btn btn-sm ${c.slug === slug ? "btn-primary" : "btn-ghost"}`}>{c.name}</Link>)}
      </div></div>
      <div className="mt-10 text-center"><span className="eyebrow">{cat.name}</span>
        <h1 className="mt-3 flex items-center justify-center gap-3 text-4xl font-extrabold tracking-tight sm:text-5xl"><span className="gradient-text">{cat.name}</span></h1>
        <p className="mx-auto mt-3 max-w-xl text-slate-500">{cat.description}</p></div>
      <Compare products={products.map((p) => ({ id: p.id, slug: p.slug, name: p.name, icon: p.icon, color: p.color, tagline: p.tagline, plans: p.plans }))} />
    </div>
  );
}