import { useState, useEffect } from « react »;
import { Link } from « react-router-dom »;
import { Eye, ShoppingCart, Heart } from « lucide-react »;
import { Product } from « @/types »;
import { useToast } from « @/hooks/use-toast »;
interface ProductCardProps {
product: Product;
index?: number;
}
const ProductCard = ({ product, index = 0 }: ProductCardProps) => {
const [isLoading, setIsLoading] = useState(true);
const [isHovered, setIsHovered] = useState(false);
const { toast } = useToast();
// Simulate loading delay
useEffect(() => {
const timer = setTimeout(() => {
setIsLoading(false);
}, 500 + Math.random() * 1000); // Random delay between 500-1500ms
return () => clearTimeout(timer);
}, []);
const handleAddToCart = (e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
toast({
title: « Produit ajouté au panier »,
description: `${product.name} a été ajouté à votre panier.`,
});
};
return (
setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
{/* Image loading placeholder */}
{isLoading && (
)}
{/* Product image */}
setIsLoading(false)}
/>
{/* Product badges */}
{product.featured && (
Populaire
)}
{/* Quick action buttons */}