Consuming Context

// Create Cart Context
const CartContext = React.createContext();

// Cart Provider
function CartProvider({ children }) {
  const [items, setItems] = React.useState([]);

  const addItem = (product) => {
    setItems(prev => {
      const existing = prev.find(item => item.id === product.id);
      if (existing) {
        return prev.map(item =>
          item.id === product.id
            ? { ...item, quantity: item.quantity + 1 }
            : item
        );
      }
      return [...prev, { ...product, quantity: 1 }];
    });
  };

  const removeItem = (id) => {
    setItems(prev => prev.filter(item => item.id !== id));
  };

  const updateQuantity = (id, quantity) => {
    if (quantity <= 0) {
      removeItem(id);
      return;
    }
    setItems(prev =>
      prev.map(item =>
        item.id === id ? { ...item, quantity } : item
      )
    );
  };

  const total = items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  const itemCount = items.reduce((sum, item) => sum + item.quantity, 0);

  const value = {
    items,
    addItem,
    removeItem,
    updateQuantity,
    total,
    itemCount
  };

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

// Header with cart badge (consumes context)
function Header() {
  const { itemCount } = React.useContext(CartContext);

  return (
    <header className="header">
      <h2>🛍️ My Store</h2>
      <div className="cart-badge">
        🛒 Cart
        {itemCount > 0 && (
          <span className="badge">{itemCount}</span>
        )}
      </div>
    </header>
  );
}

// Product list (consumes context to add items)
function ProductList() {
  const { addItem } = React.useContext(CartContext);

  const products = [
    { id: 1, name: 'Laptop', price: 999 },
    { id: 2, name: 'Mouse', price: 29 },
    { id: 3, name: 'Keyboard', price: 79 }
  ];

  return (
    <div className="product-list">
      <h3>Products</h3>
      {products.map(product => (
        <div key={product.id} className="product-card">
          <div>
            <strong>{product.name}</strong>
            <p className="price">${product.price}</p>
          </div>
          <button onClick={() => addItem(product)} className="add-btn">
            Add to Cart
          </button>
        </div>
      ))}
    </div>
  );
}

// Cart display (consumes context)
function Cart() {
  const { items, updateQuantity, removeItem, total } = React.useContext(CartContext);

  if (items.length === 0) {
    return (
      <div className="cart">
        <h3>Shopping Cart</h3>
        <p className="empty">Your cart is empty</p>
      </div>
    );
  }

  return (
    <div className="cart">
      <h3>Shopping Cart</h3>
      {items.map(item => (
        <div key={item.id} className="cart-item">
          <div className="item-info">
            <strong>{item.name}</strong>
            <p>${item.price} × {item.quantity}</p>
          </div>
          <div className="item-controls">
            <button onClick={() => updateQuantity(item.id, item.quantity - 1)}>-</button>
            <span>{item.quantity}</span>
            <button onClick={() => updateQuantity(item.id, item.quantity + 1)}>+</button>
            <button onClick={() => removeItem(item.id)} className="remove">×</button>
          </div>
        </div>
      ))}
      <div className="cart-total">
        <strong>Total:</strong> ${total.toFixed(2)}
      </div>
    </div>
  );
}

// Root App
function App() {
  return (
    <CartProvider>
      <div className="app">
        <Header />
        <div className="content">
          <ProductList />
          <Cart />
        </div>
      </div>
    </CartProvider>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);