"use client";
import { useEffect } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { SplitText } from "gsap/SplitText";

gsap.registerPlugin(ScrollTrigger, SplitText);

export const useSplitHeading = (
  headingRef: React.RefObject<HTMLElement | null>,
  subHeadingRef?: React.RefObject<HTMLElement | null>
) => {
  useEffect(() => {
    if (!headingRef.current) return;

    const headingSplit = new SplitText(headingRef.current, { type: "words" });
    const subSplit =
      subHeadingRef?.current &&
      new SplitText(subHeadingRef.current, { type: "words" });

    // heading animation
    gsap.from(headingSplit.words, {
      yPercent: 100,
      opacity: 0,
      duration: 1,
      ease: "expo.out",
      stagger: 0.07,
      scrollTrigger: {
        trigger: headingRef.current,
        start: "top 85%",
        toggleActions: "play none none none",
      },
    });

    // subheading animation
    if (subSplit) {
      gsap.from(subSplit.words, {
        yPercent: 100,
        opacity: 0,
        duration: 1,
        ease: "expo.out",
        stagger: 0.04,
        scrollTrigger: {
          trigger: subHeadingRef?.current,
          start: "top 85%",
          toggleActions: "play none none none",
        },
      });
    }

    return () => {
      headingSplit.revert();
      subSplit?.revert();
      ScrollTrigger.getAll().forEach((st) => st.kill());
    };
  }, [headingRef, subHeadingRef]);
};