import {useRecoilValue} from 'recoil';
import {shoppingBasket} from '../recoilState/basketState';
import BasketItem from './basketItem';

const BasketList = () => {
    const basket = useRecoilValue(shoppingBasket);

    return <div>
        <table>
            <thead>
                <tr>
                    <th>Product</th>
                    <th>Price</th>
                    <th>Amount</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
            {basket.map(b =>
                <BasketItem key={b.productId} {...b}/>
            )}
            </tbody>
        </table>
    </div>
}

export default BasketList;
