import { useState, useEffect, useCallback } from 'react';
import hero1 from "@/public/hero1.png";
import hero2 from "@/public/hero2.png";
import hero3 from "@/public/hero3.png";

const heroImages = [
  hero1,
  hero2,
  hero3
];

export default function Hero() {
  const [currentIndex, setCurrentIndex] = useState(0);

  const nextSlide = useCallback(() => {
    setCurrentIndex((prevIndex) => (prevIndex + 1) % heroImages.length);
  }, []);

  useEffect(() => {
    const timer = setInterval(() => {
      nextSlide();
    }, 5000);

    return () => clearInterval(timer);
  }, [nextSlide]);

  return (
    <section className="relative h-screen w-full overflow-hidden">
      {heroImages.map((src, index) => (
        <div
          key={index}
          className={`absolute inset-0 h-full w-full bg-cover bg-center transition-opacity duration-1000 ease-in-out ${index === currentIndex ? 'opacity-100' : 'opacity-0'
            }`}
          style={{ backgroundImage: `url('${src}')` }}
        >
          {index === currentIndex && (
            <div className="h-full w-full animate-zoom" />
          )}
        </div>
      ))}

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

      <div className="absolute inset-0 z-20 flex flex-col items-center justify-center text-center text-white">
        <h1 className="mb-4 text-6xl font-bold tracking-tight">
          Magyarország szíve, tálalva egy tányéron
        </h1>
        <p className="mb-8 max-w-2xl text-xl text-slate-300">
          Éld át a hagyományos magyar konyha gazdag, autentikus ízeit egy modern, elegáns környezetben.
        </p>
        <a href="#foglalas" className="rounded-md bg-amber-500 px-8 py-3 text-lg font-semibold text-slate-900 transition hover:bg-amber-400">
          Asztalfoglalás
        </a>
      </div>
    </section>
  );
}