badoHair_fe/app/boutique/page.tsx

"use client";

import { useState } from "react";
import { useLanguage } from "@/contexts/LanguageContext";
import { products, categories } from "@/data/products";
import ProductCard from "@/components/ProductCard";


export default function Shop() {
  const { t } = useLanguage();
  // const [searchParams] = useSearchParams();
  // const initialCategory = searchParams.get("category") || "all";
  const [selectedCategory, setSelectedCategory] = useState("all");

  const filtered = selectedCategory === "all" ? products : products.filter((p) => p.category === selectedCategory);

  return (
    <div className="min-h-screen py-20 lg:py-12">
      <div className="container mx-auto px-4 lg:px-8">
        <h1 className="font-serif text-3xl lg:text-5xl text-center mb-8">{t("shop.title")}</h1>

        {/* Filters */}
        <div className="flex flex-wrap justify-center gap-2 mb-10">
          <button
            onClick={() => setSelectedCategory("all")}
            className={`px-4 py-2 rounded-full text-sm transition-colors ${
              selectedCategory === "all" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-accent"
            }`}
          >
            {t("shop.filter.all")}
          </button>
          {categories.map((cat) => (
            <button
              key={cat.id}
              onClick={() => setSelectedCategory(cat.id)}
              className={`px-4 py-2 rounded-full text-sm transition-colors cursor-pointer ${
                selectedCategory === cat.id ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-accent"
              }`}
            >
              {cat.name}
            </button>
          ))}
        </div>

        {/* Product Grid */}
        <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-6">
          {filtered.map((product) => (
            <ProductCard key={product.id} product={product} />
          ))}
        </div>

        {filtered.length === 0 && (
          <p className="text-center text-muted-foreground py-20">Aucun produit trouvé.</p>
        )}
      </div>
    </div>
  );
};