Update May 12 by Elvis

components/ProductCard.tsx

@@ -1,26 +1,35 @@
+"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">
-        <img
-          src={product.image}
-          alt={product.name}
-          className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
-          loading="lazy"
-        />
+        {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">
-              Nouveau
+              {t("product.badge_new")}
             </Badge>
           )}
           {product.isBestseller && (
@@ -42,7 +51,7 @@ export default function ProductCard({ product }: ProductCardProps) {
         <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})
+            {product.rating} ({product.reviewCount} {t("product.reviews")})
           </span>
         </div>
         <div className="flex items-center gap-2">
@@ -54,4 +63,4 @@ export default function ProductCard({ product }: ProductCardProps) {
       </div>
     </Link>
   );
-};
+}