'use client'
import Image from 'next/image'
import { FC, useState } from 'react'
import ActionProduct from './ActionProduct'
import { Product } from '@/types/product.types'
import ModalReport from './ModalReport'

interface ProductImageProps {
    product: Product
}

const ProductImage: FC<ProductImageProps> = ({ product }) => {
    const [selectedImageIndex, setSelectedImageIndex] = useState(0)

    const allImages = [product.imagesUrl.cover, ...product.imagesUrl.list]
    const selectedImage = allImages[selectedImageIndex]

    return (
        <div className='w-full max-w-[380px] mx-auto lg:mx-0'>
            <div className='w-full border border-border rounded-xl h-[300px] sm:h-[350px] md:h-[400px] flex justify-center items-center relative'>
                <Image
                    src={selectedImage}
                    width={300}
                    height={300}
                    alt={product.title_fa}
                    className='max-w-[200px] max-h-[200px] sm:max-w-[240px] sm:max-h-[240px] object-contain'
                />
                <ActionProduct product={product} />
            </div>
            <div className='flex gap-2 sm:gap-3 mt-4 justify-center lg:justify-start overflow-x-auto'>
                {allImages.map((image, index) => (
                    <div
                        key={index}
                        className={`size-16 flex justify-center items-center  sm:size-20 border rounded-xl shrink-0 cursor-pointer transition-all ${selectedImageIndex === index
                            ? 'border-primary  ring-primary/20'
                            : 'border-border hover:border-primary/50'
                            }`}
                        onClick={() => setSelectedImageIndex(index)}
                    >
                        <Image
                            src={image}
                            width={50}
                            height={50}
                            alt={`${product.title_fa} - تصویر ${index + 1}`}
                            className='w-full h-full object-contain max-h-[50px] max-w-[50px] rounded-xl'
                        />
                    </div>
                ))}
            </div>
            <ModalReport productId={product._id} productName={product.title_fa} />
        </div>
    )
}

export default ProductImage