"use client"
import React, { useEffect, useState } from 'react'
import { Parallax } from "react-scroll-parallax";
import MenuItem from '../menu/MenuItem';
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Link from 'next/link';


const HomeDrink = () => {
  const [bestSeller, setBestSeller] = useState([])

  useEffect(() => {
    fetch('/api/menu-items').then(res => {
      res.json().then(menuItems => {
        setBestSeller(menuItems.slice(5, 10))
      })
    })
  }, [])


  var menuSlide = {
    dots: false,
    infinite: false,
    speed: 500,
    slidesToShow: 5,
    initialSlide: 0,
    responsive: [
      {
        breakpoint: 1524,
        settings: {
        slidesToShow: 4,
        slidesToScroll: 4,
        infinite: true,
        dots: false
        }
      },
      {
        breakpoint: 1024,
        settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: false
        }
      },
      {
        breakpoint: 810,
        settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
        initialSlide: 2
        }
      },
      {
        breakpoint: 480,
        settings: {
        slidesToShow: 1,
        slidesToScroll: 1
        }
      }
    ]
  };
  
  
  return (
    <Parallax speed={-15}>
    <div className='w-full h-full bg-[#D1BB9E] rounded-t-3xl pb-20 md:pb-40'>
      <div className='grid grid-cols-1 md:grid-cols-2 items-center py-5 sm:py-10 px-5 lg:px-10'>
        <div className='flex flex-col gap-4'>
          <p className='text-center md:text-start text-3xl lg:text-[50px] leading-none xl:text-6xl 2xl:text-[5vw] text-yellow-100 uppercase font-semibold drop-shadow-[0_3px_3px_rgba(105,105,105,1)]'>Treat yourself</p>
          <p className='w-full md:w-[500px] lg:w-[800px] text-center md:text-start text-base lg:text-lg xl:text-xl text-white'>Puffy Dought offers a wide range of flavors to choose from including classic favorites like glazed and chocolate, as well as unique flavors like Black Sesame Matcha and Passionfruit Creamcheese</p> 
        </div>
        <div className='w-full flex mt-5 md:mt-0 justify-center md:justify-end items-end text-end'>
          <Link href='/menu' className='px-4 lg:px-6 py-2 text-sm lg:text-base lg:py-3 uppercase rounded-full font-semibold border text-white hover:text-[#D1BB9E] hover:bg-[#95743D] hover:border-[#95743D] duration-300'>View All</Link>
        </div>
      </div>
      <div className='py-2 sm:py-10 px-10'>
        <Slider arrows={false} {...menuSlide}>
          {bestSeller?.length > 0 && bestSeller.map(item => (
            <div key={item} className='px-2'>
              <MenuItem  {...item}/>
            </div>
          ))}
        </Slider>
      </div>
    </div>
   </Parallax>
  )
}

export default HomeDrink