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

export const CartContext = createContext();

export const CartProvider = ({ children }) => {
    const [cart, setCart] = useState(() => {
        const savedCart = localStorage.getItem('cart');
        return savedCart ? JSON.parse(savedCart) : [];
    });

    useEffect(() => {
        localStorage.setItem('cart', JSON.stringify(cart));
    }, [cart]);

    const addToCart = (ingredient) => {
        setCart(prevCart => [...prevCart, ingredient]);
    };

    const removeFromCart = (ingredient) => {
        setCart(prevCart => prevCart.filter(item => item !== ingredient));
    };

    const value = {
        cart,
        setCart,
        addToCart,
        removeFromCart
    };

    return (
        <CartContext.Provider value={value}>
            {children}
        </CartContext.Provider>
    );
};