"use client";
import { useLayoutEffect, useRef } from "react";
import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

export default function StackedSection({ children }: { children: React.ReactNode }) {
  const containerRef = useRef<HTMLDivElement>(null);

  useLayoutEffect(() => {
    const sections = gsap.utils.toArray(".stack-section");

    sections.forEach((section: any, index: number) => {
      gsap.to(section, {
        yPercent: -5,
        ease: "none",
        scrollTrigger: {
          trigger: section,
          start: "top top",
          scrub: true,
          pin: true,
          pinSpacing: false,
        },
      });
    });
  }, []);

  return (
    <div ref={containerRef}>
      {children}
    </div>
  );
}