"use client";

import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import FMDVerticalStackCard from "./fmdVerticalStackCard";

gsap.registerPlugin(ScrollTrigger);

const FMDStackCardContainer = () => {
  useGSAP(() => {
    const cards = gsap.utils.toArray(".fmd-stack-card-animate");
    
    gsap.fromTo(
      cards,
      {
        opacity: 0,
        scale: 0.8,
        y: 20,
      },
      {
        opacity: 1,
        scale: 1,
        y: 0,
        duration: 0.3,
        ease: "back.out(1.7)",
        stagger: 0.06,
        scrollTrigger: {
          trigger: ".fmd-stack-card-container",
          start: "top 80%",
          toggleActions: "play none none none",
        },
      }
    );
  });

  return (
    <div className="max-w-2xl mx-auto py-8 absolute top-0 left-1/2 -translate-x-1/2 z-30 fmd-stack-card-container">
      <div className="flex flex-col gap-y-2 relative z-20">
        <FMDVerticalStackCard className="fmd-stack-card-animate" />
        <FMDVerticalStackCard className="fmd-stack-card-animate" />
        <FMDVerticalStackCard className="fmd-stack-card-animate" />
        <FMDVerticalStackCard className="fmd-stack-card-animate" />
        <FMDVerticalStackCard className="fmd-stack-card-animate" />
        <FMDVerticalStackCard className="fmd-stack-card-animate" />
      </div>
    </div>
  );
};

export default FMDStackCardContainer;