"use client";

import { useState, useEffect } from "react";
import Link from "next/link";

export default function HeroSlider({ images, speed = 5000 }: { images: string[], speed?: number }) {
  const [currentIndex, setCurrentIndex] = useState(0);

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

  return (
    <div style={{ position: "relative", width: "100%", height: "100%", overflow: "hidden" }}>
      {images.map((src, idx) => (
        <div
          key={idx}
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%",
            backgroundImage: `linear-gradient(rgba(15, 23, 42, 0.4), rgba(15, 23, 42, 0.7)), url('${src}')`,
            backgroundSize: "cover",
            backgroundPosition: "center",
            opacity: idx === currentIndex ? 1 : 0,
            transition: "opacity 1.5s ease-in-out",
            zIndex: idx === currentIndex ? 1 : 0,
          }}
        />
      ))}
      
      {/* Content overlaid on slider */}
      <div 
        style={{ 
          position: "relative", 
          zIndex: 10, 
          height: "100%", 
          display: "flex", 
          flexDirection: "column", 
          justifyContent: "center", 
          alignItems: "center",
          textAlign: "center"
        }}
      >
        <div className="container animate-fade-in-up">
          <h1 style={{ fontSize: "5rem", color: "white", marginBottom: "1rem", fontFamily: "var(--font-serif)" }}>
            Lazuli Hotel
          </h1>
          <p style={{ fontSize: "1.5rem", color: "#e2e8f0", marginBottom: "2.5rem" }}>
            Marsa Alam's Premier Luxury Resort
          </p>
          <div style={{ display: "flex", gap: "1rem", justifyContent: "center" }}>
            <Link href="/rooms" className="btn btn-primary" style={{ padding: "1rem 2rem", fontSize: "1.125rem" }}>
              Book Your Stay
            </Link>
            <Link href="/gallery" className="btn btn-secondary" style={{ padding: "1rem 2rem", fontSize: "1.125rem", color: "white", borderColor: "rgba(255,255,255,0.5)" }}>
              View Gallery
            </Link>
          </div>
        </div>
      </div>
      
      {/* Slider Indicators */}
      <div style={{ position: "absolute", bottom: "2rem", left: "0", right: "0", display: "flex", justifyContent: "center", gap: "0.5rem", zIndex: 10 }}>
        {images.map((_, idx) => (
          <button
            key={idx}
            onClick={() => setCurrentIndex(idx)}
            style={{
              width: "12px",
              height: "12px",
              borderRadius: "50%",
              backgroundColor: idx === currentIndex ? "var(--accent-gold)" : "rgba(255, 255, 255, 0.5)",
              border: "none",
              cursor: "pointer",
              transition: "background-color 0.3s ease"
            }}
            aria-label={`Go to slide ${idx + 1}`}
          />
        ))}
      </div>
    </div>
  );
}