"use client";

import Image from "next/image";
import { useEffect, useState } from "react";

interface SlideData {
  id: number;
  title: string;
  desktopImage: string;
  mobileImage: string;
}

interface HeroCarouselProps {
  slides: SlideData[];
  autoPlay?: boolean;
  autoPlayInterval?: number;
  height?: number;
}

export default function HeroCarouselItem({
  slides,
  autoPlay = true,
  autoPlayInterval = 5000,
  height = 470,
}: HeroCarouselProps) {
  const [currentSlide, setCurrentSlide] = useState(0);
  const [isMobile, setIsMobile] = useState(false);




  useEffect(() => {
    const handleResize = () => setIsMobile(window.innerWidth < 768);
    handleResize();
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);


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

  return (
    <>
      <section
        className="relative w-full overflow-hidden"
        style={{ height }}
      >
        {/* Slide image */}
        <Image
          src={
            isMobile
              ? slides[currentSlide]?.mobileImage || "/assets/images/1643617094594.jpg"
              : slides[currentSlide]?.desktopImage
          }
          alt={slides[currentSlide]?.title}
          fill
          sizes="100vw"
          className="object-cover w-full h-full"
          priority
        />


        <div className="absolute inset-0 bg-black/60 z-10"></div>

       <div className="container relative z-20 h-full flex  items-center justify-center text-center px-6">
          <h1 className="text-3xl md:text-4xl lg:text-[35px] font-thin text-white max-w-4xl leading-snug animate-fade-in">
            {slides[currentSlide].title}
          </h1>
        </div>
      </section>


      <div className="mt-6 w-full flex justify-center space-x-2">
        {slides.map((_, index) => (
          <div
            key={index}
            style={{ width: 14, height: 14 }}
            className={`rounded-full cursor-pointer transition-all duration-300 ${index === currentSlide
                ? "bg-black"
                : "bg-black/30 hover:bg-black/50"
              }`}
            onClick={() => setCurrentSlide(index)}
          />
        ))}
      </div>
    </>
  );
}