import {addProductToBasket, removeProductFromBasket} from '../API/shoppingBasketAPI';
import {useSetRecoilState} from 'recoil';
import {shoppingBasket} from '../recoilState/basketState';
import {Link} from 'react-router-dom';

const BasketItem = ({productId, productName, price, amount}) => {
    const setBasket = useSetRecoilState(shoppingBasket);

    const deleteItem = () => {
        removeProductFromBasket(productId).then(b => setBasket(b));
    }

    const addItem = () => {
        addProductToBasket(productId).then(b => setBasket(b));
    }

    return <tr>
            <td><Link to={`/products/${productId}`}>{productName}</Link></td>
            <td>{price}</td>
            <td>
                <button onClick={deleteItem}>-</button>{amount}<button onClick={addItem}>+</button>
            </td>
            <td>{price * amount}</td>
        </tr>

}

export default BasketItem;
