'use client'

import { useState, useEffect, useCallback } from 'react'
import { ChevronDoubleDownIcon } from '@heroicons/react/24/solid';
import Slide from '@/components/Slide';
import Slide1 from '@/components/Slide1';
import Slide2 from '@/components/Slide2';
import Slide3 from '@/components/Slide3';
import Slide4 from '@/components/Slide4';
import Slide5 from '@/components/Slide5';


const slides = [
  <Slide1 key={1} />,
  <Slide2 key={2} />,
  //<Slide3 key={3} />,
  //<Slide4 key={4} />,
  //<Slide5 key={5} />,
]

export default function Home() {
  const [current, setCurrent] = useState(0)

  
  const nextSlide = useCallback(() => {
    if (current < slides.length - 1) setCurrent(current + 1)
  }, [current])

  const prevSlide = useCallback(() => {
    if (current > 0) setCurrent(current - 1)
  }, [current])

  useEffect(() => {
    const handleScroll = (e: WheelEvent) => {
      if (e.deltaY > 0) nextSlide()
      else prevSlide()
    }

    const handleKey = (e: KeyboardEvent) => {
      if (e.key === 'ArrowDown') nextSlide()
      if (e.key === 'ArrowUp') prevSlide()
    }

    window.addEventListener('wheel', handleScroll)
    window.addEventListener('keydown', handleKey)

    return () => {
      window.removeEventListener('wheel', handleScroll)
      window.removeEventListener('keydown', handleKey)
    }
  }, [current, nextSlide, prevSlide])


  return (
    <main className="relative h-screen w-screen overflow-hidden">
      {slides.map((slide, idx) => (
        <Slide key={idx} index={idx} currentSlide={current}>
          {slide}
        </Slide>
      ))}
      <div className={`absolute bottom-4 left-1/2 transform -translate-x-1/2 text-white ${current === slides.length - 1 ? 'hidden' : ''}`}>
        <ChevronDoubleDownIcon className="w-12 h-12 animate-bounce cursor-pointer" onClick={nextSlide} />
      </div>
    </main>
  )
}