import { Product } from '@/types/marketplace';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { ShoppingCart } from 'lucide-react';

interface ProductCardProps {
  product: Product;
  onPurchase: (product: Product) => void;
  onAddToCart?: (product: Product) => void;
  isPurchasing?: boolean;
}

export function ProductCard({
  product,
  onPurchase,
  onAddToCart,
  isPurchasing = false,
}: ProductCardProps) {
  const formatPrice = (price: number, currency: string) => {
    return new Intl.NumberFormat('fr-FR', {
      style: 'currency',
      currency,
    }).format(price);
  };

  return (
    <Card className="w-full h-full flex flex-col">
      <CardHeader>
        <div className="flex justify-between items-start">
          <div>
            <CardTitle
              className="text-lg font-bold truncate"
              title={product.title}
            >
              {product.title}
            </CardTitle>
            <CardDescription className="line-clamp-2 mt-1">
              {product.description}
            </CardDescription>
          </div>
          <Badge
            variant={product.product_type === 'track' ? 'default' : 'secondary'}
          >
            {product.product_type}
          </Badge>
        </div>
      </CardHeader>
      <CardContent className="flex-grow">
        {/* Placeholder for cover if available, otherwise generic icon or color */}
        <div className="w-full h-32 bg-muted rounded-md flex items-center justify-center mb-4">
          <span className="text-muted-foreground text-sm">No Cover</span>
        </div>
        <div className="text-2xl font-bold">
          {formatPrice(product.price, product.currency)}
        </div>
        {product.license_type && (
          <div className="text-xs text-muted-foreground mt-1">
            License: {product.license_type}
          </div>
        )}
      </CardContent>
      <CardFooter className="flex gap-2">
        {onAddToCart && (
          <Button
            variant="outline"
            className="flex-1"
            onClick={() => onAddToCart(product)}
          >
            <ShoppingCart className="mr-2 h-4 w-4" /> Add to Cart
          </Button>
        )}
        <Button
          className={onAddToCart ? 'flex-1' : 'w-full'}
          onClick={() => onPurchase(product)}
          disabled={isPurchasing}
        >
          {isPurchasing ? 'Processing...' : 'Buy Now'}
        </Button>
      </CardFooter>
    </Card>
  );
}
