2 files changed, 46 insertions, 2 deletions
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 539ff6d7..bd2c895f 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -2,7 +2,7 @@ import style from '../styles/product-detail.module.css';
 
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import { Button } from '@chakra-ui/react';
 import { MessageCircleIcon, Share2Icon } from 'lucide-react';
@@ -75,6 +75,19 @@ const ProductDetail = ({ product }: Props) => {
     // setSelectedVariant(product?.variants[0])
   }, []);
 
+
+  
+  // Gabungkan semua gambar produk (utama + tambahan)
+  const allImages = product.image_carousel ? [...product.image_carousel] : [];
+
+  
+  if (product.image) {
+    allImages.unshift(product.image); // Tambahkan gambar utama di awal array
+  }
+  console.log(product);
+
+  const [mainImage, setMainImage] = useState(allImages[0] || '');
+
   return (
     <>
       <div className='md:flex md:flex-wrap'>
@@ -85,7 +98,37 @@ const ProductDetail = ({ product }: Props) => {
           <PagePopupInformation />
           <div className='md:flex md:flex-wrap'>
             <div className='md:w-4/12'>
-              <ProductImage product={product} />
+            <ProductImage product={{ ...product, image: mainImage }} />
+            
+              {/* Carousel horizontal */}
+              {allImages.length > 0 && (
+                <div className="mt-4 overflow-x-auto">
+                  <div className="flex space-x-3 pb-3">
+                    {allImages.map((img, index) => (
+                      <div 
+                        key={index} 
+                        className={`flex-shrink-0 w-16 h-16 cursor-pointer border-2 rounded-md transition-colors ${
+                          mainImage === img 
+                            ? 'border-red-500 ring-2 ring-red-200' 
+                            : 'border-gray-200 hover:border-gray-300'
+                        }`}
+                        onClick={() => setMainImage(img)}
+                      >
+                        <img
+                          src={img}
+                          alt={`Thumbnail ${index + 1}`}
+                          className="w-full h-full object-cover rounded-sm"
+                          loading="lazy"
+                          onError={(e) => {
+                            (e.target as HTMLImageElement).src = '/path/to/fallback-image.jpg';
+                          }}
+                        />
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+              
             </div>
 
             <div className='md:w-8/12 px-4 md:pl-6'>
diff --git a/src-migrate/types/product.ts b/src-migrate/types/product.ts
index 85ea702a..14ba718f 100644
--- a/src-migrate/types/product.ts
+++ b/src-migrate/types/product.ts
@@ -4,6 +4,7 @@ export interface IProduct {
   id: number;
   image: string;
   image_mobile: string;
+  image_carousel: string[];
   code: string;
   display_name: string;
   name: string;