import React, { createContext, useState } from 'react';

export const CartContext = createContext();

export const CartContextProvider = (props) => {
    const [cart, setCart] = useState({items: []});

    return(
        <CartContext.Provider value={[cart, setCart]}>
            {props.children}
        </CartContext.Provider>
    );
}

const Item = ( {item} ) => {

    const [cart, setCart] = useContext(CartContext);

    const handleClick = e => {
        setCart(prevCartItems => ({...prevCartItems, items: items.push(item)}));
    }

    console.log(cart.items);

    return(
        <div className="item">
            <div className="product">
                <h2>{item.name} : ${item.price}</h2>
                <p>Category: {item.category}</p>
            </div>
            <button onClick={handleClick} className="add-to-cart">Add to Cart</button>
        </div>
    );
}