import Image from 'next/image'
import { FC } from 'react'
import ActionProduct from './ActionProduct'

const ProductImage: FC = () => {
    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={'https://dkstatics-public.digikala.com/digikala-products/c0a7ce006d11c222bce16bd3cdd8d79aeb6689bc_1738134271.jpg?x-oss-process=image/resize,m_lfit,h_800,w_800/format,webp/quality,q_90'}
                    width={300}
                    height={300}
                    alt=''
                    className='max-w-[200px] max-h-[200px] sm:max-w-[240px] sm:max-h-[240px] object-contain'
                />
                <ActionProduct />
            </div>
            <div className='flex gap-2 sm:gap-3 mt-4 justify-center lg:justify-start overflow-x-auto'>
                <div className='size-16 sm:size-20 border border-border rounded-xl shrink-0'></div>
                <div className='size-16 sm:size-20 border border-border rounded-xl shrink-0'></div>
                <div className='size-16 sm:size-20 border border-border rounded-xl shrink-0'></div>
                <div className='size-16 sm:size-20 border border-border rounded-xl shrink-0'></div>
            </div>
        </div>
    )
}

export default ProductImage