import { useState, useEffect } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { ChevronLeft, ChevronRight } from 'lucide-react'
import './ImageSlider.css'

const ImageSlider = () => {
  const [currentIndex, setCurrentIndex] = useState(0)
  const images = [
    '/images/tutoring-1.jpg',
    '/images/tutoring-2.jpg',
    '/images/tutoring-3.jpg',
    '/images/tutoring-4.jpg'
  ]

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length)
    }, 3000)
    return () => clearInterval(interval)
  }, [images.length])

  const goToPrevious = () => {
    setCurrentIndex((prevIndex) => (prevIndex - 1 + images.length) % images.length)
  }

  const goToNext = () => {
    setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length)
  }

  const goToSlide = (index) => {
    setCurrentIndex(index)
  }

  return (
    <motion.div 
      className="slider-container"
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6, delay: 0.4 }}
    >
      <AnimatePresence initial={false}>
        <motion.div
          key={currentIndex}
          className="slide"
          initial={{ opacity: 0, x: 100, filter: 'blur(5px)' }}
          animate={{ opacity: 1, x: 0, filter: 'blur(0px)' }}
          exit={{ opacity: 0, x: -100, filter: 'blur(5px)' }}
          transition={{ duration: 0.5, ease: "easeInOut" }}
          style={{ backgroundImage: `url(${images[currentIndex]})` }}
        />
      </AnimatePresence>

      <motion.button 
        className="slider-btn slider-btn-prev" 
        onClick={goToPrevious}
        whileHover={{ scale: 1.15 }}
        whileTap={{ scale: 0.9 }}
      >
        <ChevronLeft size={24} strokeWidth={2} className="slider-icon" />
      </motion.button>
      <motion.button 
        className="slider-btn slider-btn-next" 
        onClick={goToNext}
        whileHover={{ scale: 1.15 }}
        whileTap={{ scale: 0.9 }}
      >
        <ChevronRight size={24} strokeWidth={2} className="slider-icon" />
      </motion.button>

      <div className="slider-dots">
        {images.map((_, index) => (
          <motion.button
            key={index}
            className={`dot ${index === currentIndex ? 'active' : ''}`}
            onClick={() => goToSlide(index)}
            whileHover={{ scale: 1.2 }}
            whileTap={{ scale: 0.9 }}
          />
        ))}
      </div>
    </motion.div>
  )
}

export default ImageSlider

