badoHair_fe/components/ProductCard.tsx

"use client";

import { Star } from "lucide-react";
import { Product } from "@/data/products";
import { Badge } from "@/components/ui/badge";
import Link from "next/link";
import { useLanguage } from "@/contexts/LanguageContext";

interface ProductCardProps {
  product: Product;
}

export default function ProductCard({ product }: ProductCardProps) {
  const { t } = useLanguage();

  return (
    <Link href={`/produit/${product.id}`} className="group block">
      <div className="relative overflow-hidden rounded-lg bg-muted aspect-[3/4] mb-3">
        {product.image ? (
          <img
            src={product.image}
            alt={product.name}
            className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
            loading="lazy"
          />
        ) : (
          <div className="w-full h-full bg-muted" />
        )}
        <div className="absolute top-3 left-3 flex gap-2">
          {product.isNew && (
            <Badge className="bg-primary text-primary-foreground text-[10px] uppercase tracking-wider">
              {t("product.badge_new")}
            </Badge>
          )}
          {product.isBestseller && (
            <Badge variant="secondary" className="text-[10px] uppercase tracking-wider">
              Bestseller
            </Badge>
          )}
        </div>
        {product.originalPrice && (
          <Badge className="absolute top-3 right-3 bg-destructive text-destructive-foreground text-[10px]">
            -{Math.round(((product.originalPrice - product.price) / product.originalPrice) * 100)}%
          </Badge>
        )}
      </div>
      <div className="space-y-1">
        <h3 className="text-sm font-medium text-foreground group-hover:text-primary transition-colors">
          {product.name}
        </h3>
        <div className="flex items-center gap-1">
          <Star className="h-3 w-3 fill-primary text-primary" />
          <span className="text-xs text-muted-foreground">
            {product.rating} ({product.reviewCount} {t("product.reviews")})
          </span>
        </div>
        <div className="flex items-center gap-2">
          <span className="text-sm font-semibold">{product.price} €</span>
          {product.originalPrice && (
            <span className="text-xs text-muted-foreground line-through">{product.originalPrice} €</span>
          )}
        </div>
      </div>
    </Link>
  );
}