handleCartClick()

import { useShoppingCart } from 'use-shopping-cart'

function CartButton() {
  const { handleCartClick, cartCount } = useShoppingCart()

  return <button onClick={handleCartClick}>Cart ({cartCount})</button>
}

import { useShoppingCart } from 'use-shopping-cart'

function Header() {
  const {
    handleCartClick,
    shouldDisplayCart,
    cartCount,
    cartDetails,
    formattedTotalPrice
  } = useShoppingCart()

  return (
    <header className="header">
      <button onClick={handleCartClick} className="cart-button">
        🛒 Cart ({cartCount})
      </button>

      {shouldDisplayCart && (
        <div className="cart-sidebar">
          <div className="cart-header">
            <h2>Your Cart</h2>
            <button onClick={handleCartClick}>×</button>
          </div>

          {cartCount === 0 ? (
            <p>Your cart is empty</p>
          ) : (
            <>
              <div className="cart-items">
                {Object.entries(cartDetails).map(([id, item]) => (
                  <div key={id} className="cart-item">
                    <img src={item.image} alt={item.name} />
                    <div>
                      <h4>{item.name}</h4>
                      <p>Qty: {item.quantity}</p>
                      <p>{item.formattedValue}</p>
                    </div>
                  </div>
                ))}
              </div>

              <div className="cart-footer">
                <p>Total: {formattedTotalPrice}</p>
                <button>Checkout</button>
              </div>
            </>
          )}
        </div>
      )}
    </header>
  )
}