portail-gise/src/components/store/CategorySection.jsx

// src/components/store/CategorySection.jsx
import { useState } from 'react';
import { ChevronDown } from 'lucide-react';
import ProductCard from './ProductCard';
import { parsePeriod } from './StoreHelpers';

export default function CategorySection({ categoryName, products, getCategoryIcon }) {
    const availablePeriods = new Set();
    products.forEach(p => {
        if (p.pricing?.type === 'recurrent' && p.pricing.recurrent) {
            Object.keys(p.pricing.recurrent).forEach(period => {
                const periodData = p.pricing.recurrent[period];
                if (periodData.enabled == 1 || periodData.enabled === true) availablePeriods.add(period);
            });
        }
    });

    const sortedPeriods = Array.from(availablePeriods).sort((a, b) => parsePeriod(a).weight - parsePeriod(b).weight);
    const defaultPeriod = sortedPeriods.includes('1M') ? '1M' : sortedPeriods[0];
    const [sectionPeriod, setSectionPeriod] = useState(defaultPeriod);

    return (
        <section className="mb-16 bg-black/20 p-6 rounded-3xl border border-gray-800/50">
            <div className="flex flex-col md:flex-row md:items-center justify-between mb-8 pb-6 border-b border-gray-800 space-y-4 md:space-y-0">
                <div className="flex items-center space-x-4">
                    <div className="p-3 bg-gray-900 rounded-xl border border-gray-800 shadow-[0_0_15px_rgba(0,0,0,0.5)]">
                        {getCategoryIcon(categoryName)}
                    </div>
                    <div>
                        <h2 className="text-3xl font-black text-white tracking-wider">{categoryName}</h2>
                        <div className="text-gray-500 text-sm mt-1">{products.length} instance{products.length > 1 ? 's' : ''} disponible{products.length > 1 ? 's' : ''}</div>
                    </div>
                </div>

                {sortedPeriods.length > 0 && (
                    <div className="flex items-center space-x-3 bg-gray-900 p-2 rounded-xl border border-gray-800">
                        <span className="text-sm font-medium text-gray-400 pl-2">Facturation :</span>
                        <div className="relative">
                            <select value={sectionPeriod} onChange={(e) => setSectionPeriod(e.target.value)} className="appearance-none bg-black border border-gray-700 text-cyan-400 font-bold py-2 pl-4 pr-10 rounded-lg outline-none focus:border-cyan-400 transition-colors cursor-pointer hover:bg-gray-950">
                                {sortedPeriods.map(p => ( <option key={p} value={p}>{parsePeriod(p).label}</option> ))}
                            </select>
                            <ChevronDown className="absolute right-3 top-2.5 w-5 h-5 text-cyan-400 pointer-events-none" />
                        </div>
                    </div>
                )}
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                {products.map((product) => (
                    <ProductCard key={product.id} product={product} selectedPeriod={sectionPeriod} categoryName={categoryName} />
                ))}
            </div>
        </section>
    );
}