"use client";

import { useEffect, useState } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";

const DEFAULT_HERO_IMAGES = [
  "https://images.unsplash.com/photo-1533105079780-92b9be482077?auto=format&fit=crop&w=1600&q=80",
  "https://images.unsplash.com/photo-1500835556837-99ac94a94552?auto=format&fit=crop&w=1600&q=80",
  "https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?auto=format&fit=crop&w=1600&q=80",
];

export function HeroImageSlider({ images }: { images: string[] }) {
  const slides = images.length > 0 ? images : DEFAULT_HERO_IMAGES;
  const [activeIndex, setActiveIndex] = useState(0);

  useEffect(() => {
    if (slides.length < 2) return;

    const interval = setInterval(() => {
      setActiveIndex((prev) => (prev + 1) % slides.length);
    }, 5000);

    return () => clearInterval(interval);
  }, [slides.length]);

  const prevSlide = () => {
    setActiveIndex((prev) => (prev === 0 ? slides.length - 1 : prev - 1));
  };

  const nextSlide = () => {
    setActiveIndex((prev) => (prev + 1) % slides.length);
  };

  return (
    <div className="absolute inset-0 z-0">
      {slides.map((src, index) => (
        <img
          key={src + index}
          src={src}
          alt=""
          className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-1000 ${
            index === activeIndex ? "opacity-100" : "opacity-0"
          }`}
        />
      ))}
      
      {/* Controls */}
      {slides.length > 1 && (
        <>
          <div className="absolute inset-y-0 left-4 md:left-10 flex items-center z-20">
            <button 
              onClick={prevSlide}
              className="h-12 w-12 rounded-full bg-black/20 backdrop-blur-sm flex items-center justify-center text-white hover:bg-white hover:text-merah-ranata transition"
            >
              <ChevronLeft className="h-6 w-6" />
            </button>
          </div>
          <div className="absolute inset-y-0 right-4 md:right-10 flex items-center z-20">
            <button 
              onClick={nextSlide}
              className="h-12 w-12 rounded-full bg-black/20 backdrop-blur-sm flex items-center justify-center text-white hover:bg-white hover:text-merah-ranata transition"
            >
              <ChevronRight className="h-6 w-6" />
            </button>
          </div>
          
          <div className="absolute bottom-36 left-0 right-0 flex justify-center items-center gap-2 z-20">
            {slides.map((_, i) => (
              <button
                key={i}
                onClick={() => setActiveIndex(i)}
                className={`rounded-full transition-all duration-300 ${
                  i === activeIndex 
                    ? "w-8 h-2.5 bg-[#d32f2f] shadow-[0_0_10px_rgba(211,47,47,0.5)]" 
                    : "w-2.5 h-2.5 bg-white/70 hover:bg-white"
                }`}
              />
            ))}
          </div>
        </>
      )}
    </div>
  );
}