import { useState, useEffect, useCallback } from "react";
import type { Slide } from "../models/Slide.model";

interface SliderProps {
  slides: Slide[];
  initialSlide?: number;
  height?: string;
  width?: string;
  delay?: number;
}

const Slider: React.FC<SliderProps> = ({
  slides,
  initialSlide = 0,
  height = "",
  width = "",
  delay = 30000,
}) => {
  const [currentSlide, setCurrentSlide] = useState(initialSlide);


  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % slides.length);
    }, delay);
    return () => clearInterval(interval);
  }, [delay, slides.length]);

  return (
    <div
      className={`relative w-${width} h-auto md:h-${height} overflow-hidden`}
    >
      <div
        className="flex transition-transform duration-700 ease-in-out"
        style={{ transform: `translateX(-${currentSlide * 100}%)` }}
      >
        {slides.map((slide) => (
          <div key={slide.id} className="w-full flex-shrink-0">
            <div
              className="absolute inset-0 bg-gradient-to-t from-stone-950 to-transparent opacity-10"
            >
            </div>
            <img
              src={slide.image}
              alt={slide.title}
              className="h-full object-cover object-center"
            />
          </div>
        ))}
      </div>
      <div className="absolute inset-0 flex justify-between items-center px-4">
        <button
          className="p-2 bg-stone-800 bg-opacity-80 hover:bg-opacity-100 ease-in text-white rounded-full w-10"
          onClick={() =>
            setCurrentSlide(
              (prev) => (prev - 1 + slides.length) % slides.length
            )
          }
        >
          &#10094;
        </button>
        <button
          className="p-2 bg-stone-800 bg-opacity-80 hover:bg-opacity-100 ease-in text-white rounded-full w-10"
          onClick={() => setCurrentSlide((prev) => (prev + 1) % slides.length)}
        >
          &#10095;
        </button>
      </div>
      <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2">
        {slides.map((_, index) => (
          <button
            key={index}
            className={`w-3 h-3 hover:opacity-100 rounded-full ${index === currentSlide
              ? "bg-stone-300 opacity-60"
              : "bg-stone-600 opacity-70"
              }`}
            onClick={() => setCurrentSlide(index)}
          />
        ))}
      </div>
    </div>
  );
};

export default Slider;
