// components/Cart.js
import { useSelector, useDispatch } from 'react-redux';
import { removeItem, updateQuantity, clearCart } from '../features/cart/cartSlice';

function Cart() {
    const { items, total } = useSelector(state => state.cart);
    const dispatch = useDispatch();

    if (items.length === 0) {
        return <p>Panier vide</p>;
    }

    return (
        <div className="cart">
            <h2>Panier</h2>
            {items.map(item => (
                <div key={item.id} className="cart-item">
                    <span>{item.name}</span>
                    <input
                        type="number"
                        value={item.quantity}
                        onChange={(e) => dispatch(updateQuantity({
                            id: item.id,
                            quantity: parseInt(e.target.value)
                        }))}
                        min="0"
                    />
                    <span>{item.price * item.quantity} €</span>
                    <button onClick={() => dispatch(removeItem(item.id))}>
                        Supprimer
                    </button>
                </div>
            ))}
            <p><strong>Total : {total} €</strong></p>
            <button onClick={() => dispatch(clearCart())}>Vider le panier</button>
        </div>
    );
}