"use client";

import { useState } from "react";
import { ProductCard } from "@/components/ProductCard";
import { productCategories, products, type ProductCategory } from "@/lib/products";

export function ProductCatalog() {
  const [active, setActive] = useState<ProductCategory | "Tümü">("Tümü");
  const filtered = active === "Tümü" ? products : products.filter((product) => product.category === active);

  return (
    <>
      <div className="filter-tabs" role="tablist" aria-label="Ürün kategorileri">
        {(["Tümü", ...productCategories] as const).map((category) => (
          <button
            key={category}
            type="button"
            role="tab"
            aria-selected={active === category}
            className={active === category ? "active" : ""}
            onClick={() => setActive(category)}
          >
            {category}
          </button>
        ))}
      </div>
      <div className="product-grid all-products-grid">
        {filtered.map((product) => <ProductCard key={product.slug} product={product} />)}
      </div>
    </>
  );
}