"use client";

import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { type ReactNode, useRef } from "react";

if (typeof window !== "undefined") {
  gsap.registerPlugin(ScrollTrigger, useGSAP);
}

type ScrollSceneProps = {
  children: ReactNode;
  className?: string;
  setup: (params: {
    container: HTMLElement;
    gsap: typeof gsap;
    ScrollTrigger: typeof ScrollTrigger;
  }) => void;
};

/**
 * Optional GSAP scroll-trigger scene wrapper. Drop if not using GSAP.
 */
export function ScrollScene({ children, className, setup }: ScrollSceneProps) {
  const containerRef = useRef<HTMLDivElement>(null);

  useGSAP(
    () => {
      if (!containerRef.current) return;
      setup({ container: containerRef.current, gsap, ScrollTrigger });
    },
    { scope: containerRef },
  );

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