import React from 'react'

import { ProductProps } from './Product.types'

import './Product.css'

const Product = ({ data, style, onClick, onMouseDown }: ProductProps) => {
  return (
    <div
      key={data.id}
      className='bg-white border cursor-pointer flex group items-center justify-center p-2 relative rounded select-none w-full'
      onClick={onClick}
      onMouseDown={onMouseDown}
      style={style}
    >
      <div className='flex flex-col items-center justify-center w-full'>
        {data.thumbnail ? (
          <div className={`h-24 mb-auto relative rounded w-full`}>
            {/* <Image
            src={`https://cdn.vapta.co.uk/product_images/${data.sku}.jpg`}
            layout='fill'
            objectFit='contain'
            className='rounded'
          /> */}
          </div>
        ) : (
          <div className='bg-gray-100 flex h-24 items-center justify-center mb-auto rounded w-full'>
            <p className='text-xs'>Awaiting Image</p>
          </div>
        )}

        <p className='font-bold mt-4 text-center text-sm w-full'>{data.name}</p>
        <p className='text-gray-500 text-xs'>SKU: {data.sku}</p>

        <p className='my-2'>£{data.unit_price}</p>
      </div>
    </div>
  )
}

export default Product
