import React, { useContext, useState } from 'react'
import Image from 'next/image';
import { CartContext } from '../AppContext';
import toast from 'react-hot-toast';

const MenuItem = (menuItem) => {
  const {menuImg, itemName, description, basePrice, sizes} = menuItem
  const {addToCart} = useContext(CartContext);
  const [showPopup, setShowPopup] = useState(false);

  function handleAddToCartButtonClick(){
    if(sizes.length === 0 ){
      addToCart(menuItem);
      toast.success('Add to cart');
    } else{
      setShowPopup(true)
    }
  }
  
  return (
    <div className='py-1 sm:py-5 flex flex-col gap-2 sm:gap-4 justify-center items-center text-center rounded-xl bg-white h-[350px] sm:h-[450px]'>
      <Image src={menuImg} width={300} height={300} alt='menu-donut' className='w-[200px] sm:w-[250px]'/>
      <p className='text-sm sm:text-base font-semibold capitalize text-[#95743D] px-2'>{itemName}</p>
      <p className='text-xs sm:text-sm px-2 line-clamp-2 text-[#95743D]'>{description}</p>
      <p className='text-[#95743D] text-sm'>${basePrice}</p>
      <button type='button' onClick={handleAddToCartButtonClick} className='px-2 py-1 sm:px-4 sm:py-2 rounded-full text-xs sm:text-sm border border-[#E78895] text-[#95743D] font-semibold hover:bg-[#E78895] hover:text-[#FDE2DE] duration-300'>Add to cart</button>
    </div>

  )
}

export default MenuItem