Build React Apps
10x Faster with AI

// Generated by Stakly AI
import React, { useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { ShoppingCart, Plus, Minus } from 'lucide-react';

export function ProductCard({ product, onAddToCart }) {
  const [quantity, setQuantity] = useState(1);
  const [isLoading, setIsLoading] = useState(false);

  const handleAddToCart = async () => {
    setIsLoading(true);
    await onAddToCart(product, quantity);
    setIsLoading(false);
    setQuantity(1);
  };

  return (
    <Card className="hover:shadow-lg transition-shadow">
      <CardHeader>
        <img 
          src={product.image} 
          alt={product.name}
          className="w-full h-48 object-cover rounded-md"
        />
      </CardHeader>
      <CardContent>
        <CardTitle>{product.name}</CardTitle>
        <p className="text-gray-600 mt-2">{product.description}</p>
        <div className="flex items-center justify-between mt-4">
          <span className="text-2xl font-bold">${product.price}</span>
          <div className="flex items-center gap-2">
            <Button
              size="icon"
              variant="outline"
              onClick={() => setQuantity(Math.max(1, quantity - 1))}
            >
              <Minus className="h-4 w-4" />
            </Button>
            <span className="w-8 text-center">{quantity}</span>
            <Button
              size="icon"
              variant="outline"
              onClick={() => setQuantity(quantity + 1)}
            >
              <Plus className="h-4 w-4" />
            </Button>
          </div>
        </div>
        <Button 
          className="w-full mt-4" 
          onClick={handleAddToCart}
          disabled={isLoading}
        >
          <ShoppingCart className="h-4 w-4 mr-2" />
          Add to Cart
        </Button>
      </CardContent>
    </Card>
  );
}