🛒 Shopping Cart - Real E-Commerce Example

import { createSignal, createComputed } from 'signalforge/core';
import { useSignalValue } from 'signalforge/react';
import { useState } from 'react';

function ShoppingCart() {
  const [cart] = useState(() => createSignal<CartItem[]>([]));
  
  // Computed totals - auto-update!
  const [totalItems] = useState(() => createComputed(() => 
    cart.get().reduce((sum, item) => sum + item.quantity, 0)
  ));
  
  const [totalPrice] = useState(() => createComputed(() => 
    cart.get().reduce((sum, item) => 
      sum + item.price * item.quantity, 0
    )
  ));
  
  const totalItemsValue = useSignalValue(totalItems);
  const totalPriceValue = useSignalValue(totalPrice);
  
  // Add item to cart
  const addToCart = (product) => {
    const existing = cart.get().find(i => i.id === product.id);
    if (existing) {
      // Increment quantity
      cart.set(cart.get().map(item =>
        item.id === product.id
          ? { ...item, quantity: item.quantity + 1 }
          : item
      ));
    } else {
      // Add new item
      cart.set([...cart.get(), { ...product, quantity: 1 }]);
    }
  };
  
  // Update quantity
  const updateQuantity = (id, delta) => {
    cart.set(cart.get()
      .map(item => item.id === id
        ? { ...item, quantity: item.quantity + delta }
        : item
      )
      .filter(item => item.quantity > 0)
    );
  };
  
  return (
    <div>
      <h2>Cart ({totalItemsValue} items)</h2>
      <h2>Total: 0</h2>
      {/* Cart items */}
    </div>
  );
}