import React from 'react'
import Image from 'next/image';

const MenuItem = () => {
  
  
  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='/donut1.png' width={300} height={300} alt='menu-donut' className='w-[200px] sm:w-[300px]'/>
      <p className='text-sm sm:text-base font-semibold capitalize text-[#95743D] px-2'>Chocolate Beurre noisette Walnut Cream</p>
      <p className='text-[#95743D] text-sm'>$5.99</p>
      <button 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