Update May 12 by Elvis

app/produit/[id]/page.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Star, ChevronLeft, Check } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useLanguage } from "@/contexts/LanguageContext";
 import { useCart } from "@/contexts/CartContext";
-import { products } from "@/data/products";
+import { getProduct, listProducts } from "@/lib/api/products";
+import type { Product } from "@/data/products";
 import ProductCard from "@/components/ProductCard";
 import Link from "next/link";
 import { useParams } from "next/navigation";
@@ -15,27 +16,60 @@ export default function ProductDetail() {
   const { id } = useParams();
   const { t } = useLanguage();
   const { addItem } = useCart();
-  const product = products.find((p) => p.id === id);
 
+  const [product, setProduct] = useState<Product | null>(null);
+  const [similar, setSimilar] = useState<Product[]>([]);
+  const [loading, setLoading] = useState(true);
   const [selectedImage, setSelectedImage] = useState(0);
   const [selectedColor, setSelectedColor] = useState("");
   const [selectedLength, setSelectedLength] = useState("");
 
-  if (!product) {
+  useEffect(() => {
+    if (!id) return;
+    setLoading(true);
+    getProduct(id as string)
+      .then((p) => {
+        setProduct(p);
+        setSelectedImage(0);
+        setSelectedColor(p.colors[0] ?? "");
+        setSelectedLength(p.lengths[0] ?? "");
+        return listProducts({ category: p.category, exclude: p.id, per_page: 4 });
+      })
+      .then((res) => setSimilar(res.data))
+      .catch((e) => console.error("[produit] fetch failed:", e))
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  if (loading) {
     return (
-      <div className="min-h-screen flex items-center justify-center">
-        <p className="text-muted-foreground">Produit non trouvé</p>
+      <div className="min-h-screen py-6 lg:py-12">
+        <div className="container mx-auto px-4 lg:px-8">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16">
+            <div className="aspect-[3/4] bg-muted animate-pulse rounded-lg" />
+            <div className="space-y-4">
+              <div className="h-8 bg-muted animate-pulse rounded w-3/4" />
+              <div className="h-4 bg-muted animate-pulse rounded w-1/4" />
+              <div className="h-24 bg-muted animate-pulse rounded" />
+            </div>
+          </div>
+        </div>
       </div>
     );
   }
 
-  const similar = products.filter((p) => p.category === product.category && p.id !== product.id).slice(0, 4);
+  if (!product) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <p className="text-muted-foreground">{t("product.not_found")}</p>
+      </div>
+    );
+  }
 
   const handleAddToCart = () => {
     const color = selectedColor || product.colors[0];
     const length = selectedLength || product.lengths[0];
     addItem(product, color, length);
-    toast.success(`Ajouté au panier - ${product.name} - ${color}, ${length}`);
+    toast.success(`${t("product.added_to_cart")} — ${product.name} — ${color}, ${length}`);
   };
 
   return (
@@ -46,10 +80,13 @@ export default function ProductDetail() {
         </Link>
 
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16">
-          {/* Images */}
           <div className="space-y-3">
             <div className="aspect-[3/4] rounded-lg overflow-hidden bg-muted">
-              <img src={product.images[selectedImage]} alt={product.name} className="w-full h-full object-cover" />
+              <img
+                src={product.images[selectedImage]}
+                alt={product.name}
+                className="w-full h-full object-cover"
+              />
             </div>
             {product.images.length > 1 && (
               <div className="flex gap-2">
@@ -68,29 +105,34 @@ export default function ProductDetail() {
             )}
           </div>
 
-          {/* Details */}
           <div className="space-y-6">
             <div>
               <h1 className="font-serif text-2xl lg:text-4xl font-semibold mb-2">{product.name}</h1>
               <div className="flex items-center gap-2 mb-4">
                 <div className="flex gap-0.5">
                   {Array.from({ length: 5 }).map((_, i) => (
-                    <Star key={i} className={`h-4 w-4 ${i < Math.floor(product.rating) ? "fill-primary text-primary" : "text-muted"}`} />
+                    <Star
+                      key={i}
+                      className={`h-4 w-4 ${
+                        i < Math.floor(product.rating) ? "fill-primary text-primary" : "text-muted"
+                      }`}
+                    />
                   ))}
                 </div>
-                <span className="text-sm text-muted-foreground">({product.reviewCount} avis)</span>
+                <span className="text-sm text-muted-foreground">({product.reviewCount} {t("product.reviews")})</span>
               </div>
               <div className="flex items-baseline gap-3">
                 <span className="text-2xl font-semibold">{product.price} €</span>
                 {product.originalPrice && (
-                  <span className="text-lg text-muted-foreground line-through">{product.originalPrice} €</span>
+                  <span className="text-lg text-muted-foreground line-through">
+                    {product.originalPrice} €
+                  </span>
                 )}
               </div>
             </div>
 
             <p className="text-muted-foreground leading-relaxed">{product.description}</p>
 
-            {/* Color selector */}
             <div>
               <h3 className="text-sm font-medium mb-2">{t("product.color")}</h3>
               <div className="flex flex-wrap gap-2">
@@ -99,7 +141,7 @@ export default function ProductDetail() {
                     key={color}
                     onClick={() => setSelectedColor(color)}
                     className={`px-3 py-1.5 rounded-full text-sm border transition-colors cursor-pointer ${
-                      (selectedColor || product.colors[0]) === color
+                      selectedColor === color
                         ? "border-primary bg-accent text-accent-foreground"
                         : "border-border text-muted-foreground hover:border-primary"
                     }`}
@@ -110,7 +152,6 @@ export default function ProductDetail() {
               </div>
             </div>
 
-            {/* Length selector */}
             <div>
               <h3 className="text-sm font-medium mb-2">{t("product.length")}</h3>
               <div className="flex gap-2">
@@ -119,7 +160,7 @@ export default function ProductDetail() {
                     key={length}
                     onClick={() => setSelectedLength(length)}
                     className={`px-4 py-2 rounded-md text-sm border transition-colors cursor-pointer ${
-                      (selectedLength || product.lengths[0]) === length
+                      selectedLength === length
                         ? "border-primary bg-accent text-accent-foreground"
                         : "border-border text-muted-foreground hover:border-primary"
                     }`}
@@ -134,22 +175,22 @@ export default function ProductDetail() {
               {t("cart.add")}
             </Button>
 
-            {/* Features */}
-            <div>
-              <h3 className="text-sm font-medium mb-3">{t("product.features")}</h3>
-              <ul className="space-y-2">
-                {product.features.map((feature) => (
-                  <li key={feature} className="flex items-center gap-2 text-sm text-muted-foreground">
-                    <Check className="h-4 w-4 text-primary" />
-                    {feature}
-                  </li>
-                ))}
-              </ul>
-            </div>
+            {product.features.length > 0 && (
+              <div>
+                <h3 className="text-sm font-medium mb-3">{t("product.features")}</h3>
+                <ul className="space-y-2">
+                  {product.features.map((feature) => (
+                    <li key={feature} className="flex items-center gap-2 text-sm text-muted-foreground">
+                      <Check className="h-4 w-4 text-primary" />
+                      {feature}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
           </div>
         </div>
 
-        {/* Similar */}
         {similar.length > 0 && (
           <section className="mt-16 lg:mt-24">
             <h2 className="font-serif text-2xl mb-8">{t("product.similar")}</h2>
@@ -163,4 +204,4 @@ export default function ProductDetail() {
       </div>
     </div>
   );
-};
+}