import { notFound } from "next/navigation";
import { blogCategories } from "@/data/content";
import BlogList from "@/components/BlogList";

/**
 * Shareable category URL: /blog/category/meta. Thin wrapper around the same
 * client-side BlogList the /blog?category=… form renders -- the slug pins the
 * category, the ?page= search param still drives pagination, and the chip row
 * links use the ?category= form so navigation stays consistent across both.
 * Unknown slugs 404: a real route can notFound(), a query param cannot.
 */
export default function BlogCategoryPage({ params }: { params: Promise<{ category: string }> }) {
  const { category } = await params;
  if (!category || !blogCategories().includes(category)) notFound();

  return (
    <main>
      <BlogList category={category} />
    </main>
  );
}