"use client";

import { use } from "react";
import { notFound } from "next/navigation";
import { GroceryTile } from "@/components/silo/GroceryTile";
import { siloByDepartment, siloDepartments } from "@/data/silo-catalog";

type Props = { params: Promise<{ slug: string }> };

export default function CategoryDetailPage({ params }: Props) {
  const { slug } = use(params);
  const category = siloDepartments.find((d) => d.slug === slug);
  if (!category) notFound();
  const list = siloByDepartment(slug);

  return (
    <div className="mx-auto w-full max-w-[1280px] px-4 py-10 sm:px-6 lg:px-8">
      <p className="text-[11px] font-bold uppercase tracking-[0.18em] text-[var(--straw)]">
        Department
      </p>
      <h1 className="mt-1 font-serif text-4xl">{category.name}</h1>
      <p className="mt-2 max-w-xl text-sm text-muted">{category.description}</p>
      <div className="mt-8 grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5">
        {list.map((product) => (
          <GroceryTile key={product.id} product={product} layout="grid" />
        ))}
      </div>
    </div>
  );
}