import React from 'react'
import { InfoIcon } from 'lucide-react'
import { Tooltip } from '@chakra-ui/react'

import { IProductDetail } from '~/types/product'
import ImageUI from '~/components/ui/image'

type Props = {
  product: IProductDetail
}

const Image = ({ product }: Props) => {
  return (
    <div className='h-[250px] md:h-[340px] flex items-center justify-center border border-gray-200 rounded-lg p-4 relative'>
      <ImageUI
        src={product.image || '/images/noimage.jpeg'}
        alt={product.name}
        width={256}
        height={256}
        className='object-contain object-center h-full w-full'
        classNames={{ wrapper: 'h-full w-full' }}
        loading='eager'
        priority
      />
      <div className='absolute hidden md:block top-4 right-4'>
        <Tooltip
          placement='bottom-end'
          label='Gambar atau foto berperan sebagai ilustrasi produk. Kadang tidak sesuai dengan kondisi terbaru dengan berbagai perubahan dan perbaikan. Hubungi admin kami untuk informasi yang lebih baik perihal gambar.'
        >
          <div className="text-gray-600">
            <InfoIcon size={20} />
          </div>
        </Tooltip>
      </div>
    </div>
  )
}

export default Image