import style from '../styles/item.module.css';

import { Tooltip } from '@chakra-ui/react';

import Image from '~/components/ui/image';
import { IProductVariantPromo } from '~/types/promotion';

type Props = {
  variant: IProductVariantPromo;
  isFree?: boolean;
};

const ProductPromoItem = ({ variant, isFree = false }: Props) => {
  return (
    <div className={style.item}>
      <div className={style.image}>
        <Image
          src={variant.image || '/images/noimage.jpeg'}
          alt={variant.display_name}
          width={120}
          height={120}
          quality={85}
        />
        <div className={style.quantity}>
          {variant.qty} pcs {isFree ? '(free)' : ''}
        </div>
      </div>
      <Tooltip label={variant.display_name} placement='top' fontSize='sm'>
        <div className={style.name}>{variant.name}</div>
      </Tooltip>
    </div>
  );
};

export default ProductPromoItem;