import { useMemo } from 'react';

function ProductList({ products, sortBy }) {
    // Recalculé SEULEMENT si products ou sortBy change
    const sortedProducts = useMemo(() => {
        console.log('Tri en cours...');
        return [...products].sort((a, b) => {
            if (sortBy === 'price') return a.price - b.price;
            if (sortBy === 'name') return a.name.localeCompare(b.name);
            return 0;
        });
    }, [products, sortBy]);

    return (
        <ul>
            {sortedProducts.map(p => (
                <li key={p.id}>{p.name} - {p.price}€</li>
            ))}
        </ul>
    );
}