"use client";

import { useState } from "react";
import type { Product } from "@/lib/content";
import ProductCard from "./ProductCard";

export default function ProductsGrid({
  products,
  category,
  title,
}: {
  products: Product[];
  category: 'baguette' | 'malitz' | 'ciabatta';
  title: string;
}) {
  const [openProductId, setOpenProductId] = useState<string | null>(null);

  const toggleProduct = (gencod: string) => {
    setOpenProductId(openProductId === gencod ? null : gencod);
  };

  return (
    <>
      <h2 className="mt-16 font-display text-2xl text-cream" id={category}>
        {title}
      </h2>
      <div className="mt-6 grid gap-5 sm:grid-cols-2 lg:grid-cols-3 items-start">
        {products.map((p) => (
          <ProductCard
            key={p.gencod}
            p={p}
            category={category}
            isOpen={openProductId === p.gencod}
            onToggle={() => toggleProduct(p.gencod)}
          />
        ))}
      </div>
    </>
  );
}