import { Button } from '@/components/ui/button';
import { useCart } from '@/hooks/use-cart'; // [!code ++]
import { addToast } from '@heroui/toast'; // [!code ++]

interface Props { // [!code ++]
  product: { id: string; name: string }; // [!code ++]
} // [!code ++]

export default function ProductCard({ product }: Props) { // [!code focus]
  const { addToCart, isLoading } = useCart(); // [!code ++]

  const handleAddToCart = () => { // [!code focus]
    addToCart(product.id); // [!code ++]
    addToast({ title: "Added to cart!" }); // [!code ++]
  };

  return (
    <div className="p-4 border rounded-lg"> // [!code focus]
      <h3 className="font-semibold">{product.name}</h3> // [!code focus]
      <Button onClick={handleAddToCart} disabled={isLoading}>
        Add to Cart
      </Button>
    </div>
  );
}