import { useCartStore } from '../../stores/cart';
import { ShoppingCart } from 'lucide-react';

export default function CartBadge() {
  const { items, toggleCart } = useCartStore();
  const count = items.reduce((sum, item) => sum + item.quantity, 0);

  return (
    <button onClick={toggleCart} className="relative p-2 hover:bg-gray-100 rounded-lg">
      <ShoppingCart className="w-6 h-6" />
      {count > 0 && (
        <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs w-5 h-5 rounded-full flex items-center justify-center">
          {count > 9 ? '9+' : count}
        </span>
      )}
    </button>
  );
}