import Button from "@/components/ui/Button";
import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
import TextAnimation from "@/components/ui/TextAnimation";
import ImageOrVideo from "@/components/ui/ImageOrVideo";
import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "motion/react";

type HeroBillboardCarouselProps = {
  tag: string;
  title: string;
  description: string;
  primaryButton: { text: string; href: string };
  secondaryButton: { text: string; href: string };
  items: ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never })[];
};

const HeroBillboardCarousel = ({
  tag,
  title,
  description,
  primaryButton,
  secondaryButton,
  items,
}: HeroBillboardCarouselProps) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex((prevIndex) => (prevIndex + 1) % items.length);
    }, 5000); // Change image every 5 seconds
    return () => clearInterval(interval);
  }, [items.length]);

  return (
    <section
      aria-label="Hero section"
      className="relative flex flex-col items-center justify-center gap-8 w-full min-h-svh py-25 overflow-hidden"
    >
      <HeroBackgroundSlot />
      <div className="absolute inset-0 z-0">
        <AnimatePresence initial={false}>
          <motion.div
            key={currentIndex}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 1.5, ease: "easeInOut" }}
            className="absolute inset-0"
          >
            <ImageOrVideo
              imageSrc={items[currentIndex].imageSrc}
              videoSrc={items[currentIndex].videoSrc}
              className="w-full h-full object-cover"
            />
          </motion.div>
        </AnimatePresence>
      </div>

      <div className="relative z-10 flex flex-col items-center gap-2 w-content-width mx-auto text-center">
        <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
          <p>{tag}</p>
        </div>

        <TextAnimation
          text={title}
          variant="fade-blur"
          gradientText={true}
          tag="h1"
          className="text-6xl font-medium text-balance"
        />

        <TextAnimation
          text={description}
          variant="fade-blur"
          gradientText={false}
          tag="p"
          className="text-base md:text-lg leading-tight text-balance"
        />

        <div className="flex flex-wrap justify-center gap-3 mt-3">
          <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
          <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
        </div>
      </div>

      <div className="relative z-10 flex justify-center gap-2 mt-4">
        {items.map((_, index) => (
          <button
            key={index}
            onClick={() => setCurrentIndex(index)}
            className={`h-2 w-2 rounded-full transition-colors ${
              currentIndex === index ? "bg-primary-cta" : "bg-muted"
            }`}
            aria-label={`Go to slide ${index + 1}`}
          />
        ))}
      </div>
    </section>
  );
};

export default HeroBillboardCarousel;