"use client";

import { useEffect, useState } from "react";

type HomeHeroBackgroundCarouselProps = {
  images: string[];
  intervalMs?: number;
};

export function HomeHeroBackgroundCarousel({
  images,
  intervalMs = 5000,
}: HomeHeroBackgroundCarouselProps) {
  const safeImages = images.filter(Boolean);
  const [activeIndex, setActiveIndex] = useState(0);

  useEffect(() => {
    if (safeImages.length <= 1) return;
    const timer = window.setInterval(() => {
      setActiveIndex((prev) => (prev + 1) % safeImages.length);
    }, intervalMs);
    return () => window.clearInterval(timer);
  }, [intervalMs, safeImages.length]);

  if (safeImages.length === 0) return null;

  return (
    <div className="absolute inset-0 -z-20">
      {safeImages.map((src, idx) => (
        // eslint-disable-next-line @next/next/no-img-element
        <img
          key={src}
          src={src}
          alt=""
          aria-hidden="true"
          className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ${
            idx === activeIndex ? "opacity-100" : "opacity-0"
          }`}
        />
      ))}
      {/* 只在左侧做可读性增强，不整屏压暗 Banner */}
      <div className="absolute inset-y-0 left-0 w-[48%] bg-gradient-to-r from-slate-950/48 via-slate-950/18 to-transparent" />
      <div className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-slate-950/30 to-transparent" />
    </div>
  );
}