"use client";
import { useEffect, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { cn } from "@/lib/utils";

type component = {
  id?: number;
  title?: string;
  description?: string;
  bgimage?: string;
};

type CardsProps = {
  cardData: component[];
  className?: string;
};

type componentProps = {
  title?: string;
  description?: string;
};

export default function StackCarousel({ cardData, className }: CardsProps) {
  const [cards, setCards] = useState(cardData);
  const [index, setIndex] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      setCards((prev) => {
        const [first, ...rest] = prev;
        return [...rest, first];
      });
    }, 2000);

    return () => clearInterval(interval);
  }, []);

  const visibleCards = [
    cards[index % cards.length],
    cards[(index + 1) % cards.length],
    cards[(index + 2) % cards.length],
  ];

  return (
    <div className={cn("relative mx-auto", className)}>
      <AnimatePresence>
        {visibleCards?.map((card, i) => (
          <motion.div
            key={card.id}
            className="h-full w-full border-2 border-white absolute rounded-2xl shadow-[inset_0_1px_2px_rgba(255,255,255,0.2)] backdrop-blur-sm flex items-center justify-center "
            initial={{
              y: i * 14,
              opacity: 0,
            }}
            animate={{
              y: i * 16,
              opacity: 1,
            }}
            exit={{
              scale: 0.9,
              opacity: 0,
            }}
            transition={{ duration: 0.6 }}
            style={{
              zIndex: 10 - i,
              backgroundImage: `url(${card.bgimage ? card.bgimage : "/11.jpg"})`,
              backgroundPosition: "center",
              backgroundSize: "cover",
            }}
          >
            <BasicCard title={card.title} description={card.description} />
          </motion.div>
        ))}
      </AnimatePresence>
    </div>
  );
}

function BasicCard({ title, description }: componentProps) {
  return (
    <div className="w-full h-full rounded-2xl p-4 flex flex-col justify-center items-center shadow-lg">
      <h2 className="text-[3rem] text-white font-semibold">{title}</h2>
      {description && (
        <p className="text-lg text-white mt-2 text-center">{description}</p>
      )}
    </div>
  );
}