Enhance cart feedback and images

Co-authored-by: CyberTechDroid <229118619+CyberTechDroid@users.noreply.github.com>

src/components/CartDrawer.tsx

@@ -132,7 +132,7 @@ export function CartDrawer() {
                     <div className="flex gap-3">
                       <div className="h-16 w-16 rounded-lg bg-card flex items-center justify-center shrink-0">
                         <img
-                          src={item.product.image}
+                          src={item.product.imageUrl ?? item.product.image}
                           alt={item.product.name}
                           className="h-12 w-12 object-contain"
                         />

src/components/ProductCard.tsx

@@ -1,15 +1,36 @@
-import { ShoppingCart, Plus } from 'lucide-react';
+import { ShoppingCart, Plus, Check } from 'lucide-react';
+import { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { Product } from '@/types';
 import { useCart } from '@/context/CartContext';
+import { useToast } from '@/hooks/use-toast';
 
 interface ProductCardProps {
   product: Product;
 }
 
 export function ProductCard({ product }: ProductCardProps) {
-  const { addItem } = useCart();
+  const { addItem, setIsCartOpen } = useCart();
+  const { toast } = useToast();
+  const [justAdded, setJustAdded] = useState(false);
+
+  const handleAdd = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    addItem(product);
+    setJustAdded(true);
+    setTimeout(() => setJustAdded(false), 1200);
+    toast({
+      title: '✓ Added to cart',
+      description: product.name,
+      action: (
+        <Button size="sm" variant="outline" onClick={() => setIsCartOpen(true)}>
+          View Cart
+        </Button>
+      ),
+    });
+  };
 
   return (
     <Card className="card-hover group overflow-hidden border bg-card">