"use client"; // This must be a client component to use React hooks

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

// --- Configuration ---
// Add the paths to your 5 background images here.
// Make sure they are in the `public/backgrounds` directory.
const images = [
  "/backgrounds/1.avif",
  "/backgrounds/2.avif",
  "/backgrounds/3.avif",
  "/backgrounds/4.avif",
  "/backgrounds/5.avif",
];

const SWITCH_INTERVAL = 60000; // 60 seconds

export default function SwitchingBackground() {
  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  useEffect(() => {
    // Set up an interval to switch the image
    const timer = setInterval(() => {
      setCurrentImageIndex((prevIndex) => (prevIndex + 1) % images.length);
    }, SWITCH_INTERVAL);

    // Clear the interval when the component unmounts to prevent memory leaks
    return () => clearInterval(timer);
  }, []);

  return (
    <div className="fixed inset-0 -z-10 h-full w-full">
      {images.map((src, index) => (
        <Image
          key={src}
          src={src}
          alt={`Background image ${index + 1}`}
          fill
          className={`object-cover blur-md scale-105 transition-opacity duration-1000 ease-in-out ${
            index === currentImageIndex ? "opacity-100" : "opacity-0"
          }`}
          // Preload the next image for a smoother transition
          priority={index === (currentImageIndex + 1) % images.length}
        />
      ))}
      {/* Adds a subtle glossy overlay effect */}
      <div className="absolute inset-0 bg-gradient-to-t from-transparent via-transparent to-white/10" />
    </div>
  );
}