From 8922bd5aa44cbccbf05f9ce70aa1c891ce960d78 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Thu, 12 Mar 2026 22:52:06 +0000
Subject: [PATCH] Enhance cart feedback and images

Co-authored-by: CyberTechDroid <229118619+CyberTechDroid@users.noreply.github.com>
---
 src/components/CartDrawer.tsx  |  2 +-
 src/components/ProductCard.tsx | 25 +++++++++++++++++++++++--
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/components/CartDrawer.tsx b/src/components/CartDrawer.tsx
index 4cd30b2..476a2de 100644
--- a/src/components/CartDrawer.tsx
+++ b/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"
                         />
diff --git a/src/components/ProductCard.tsx b/src/components/ProductCard.tsx
index f5b30f7..525f960 100644
--- a/src/components/ProductCard.tsx
+++ b/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">