add state management and other stuff

src/components/ProductCard.tsx

@@ -6,6 +6,8 @@ import { Product } from '@/mock/product';
 
 interface ProductCardProps {
   product: Product;
+  onAdd?: () => void;
+  added?: boolean;
 }
 
 function getRestrictionFlags(restrictions?: Product['restrictions']): string[] {
@@ -17,7 +19,7 @@ function getRestrictionFlags(restrictions?: Product['restrictions']): string[] {
   return flags;
 }
 
-export default function ProductCard({ product }: ProductCardProps) {
+export default function ProductCard({ product, onAdd, added }: ProductCardProps) {
   const [imageError, setImageError] = useState(false);
   const lowestPrice = Math.min(...product.offers.map(offer => offer.price));
 
@@ -86,7 +88,7 @@ export default function ProductCard({ product }: ProductCardProps) {
     <div className="card bg-base-100 shadow-lg hover:shadow-xl transition-shadow duration-300 border border-base-300">
       <figure className="relative">
         <img
-          src={imageError ? 'https://placehold.co/300x200/6b7280/ffffff?text=No+Image' : product.image_url}
+          src={imageError ? '/window.svg' : product.image_url}
           alt={product.name}
           className="w-full h-48 object-cover"
           onError={() => setImageError(true)}
@@ -116,6 +118,15 @@ export default function ProductCard({ product }: ProductCardProps) {
               View Details
             </a>
           </Link>
+          {onAdd && (
+            <button
+              className="btn btn-accent btn-sm ml-2"
+              onClick={onAdd}
+              disabled={added}
+            >
+              {added ? 'Added!' : 'Add'}
+            </button>
+          )}
         </div>
       </div>
     </div>