"use client";

import { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

export function useScrollReveal(options?: {
  y?: number;
  duration?: number;
  delay?: number;
  ease?: string;
  start?: string;
  end?: string;
  scrub?: boolean | number;
}) {
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    if (!ref.current) return;

    // Lazy registration to avoid Next.js hydration mismatch issues
    gsap.registerPlugin(ScrollTrigger);

    const ctx = gsap.context(() => {
      gsap.fromTo(
        ref.current,
        { y: options?.y ?? 60, opacity: 0 },
        {
          y: 0,
          opacity: 1,
          duration: options?.duration ?? 0.9,
          delay: options?.delay ?? 0,
          ease: options?.ease ?? "power3.out",
          scrollTrigger: {
            trigger: ref.current,
            start: options?.start ?? "top 85%",
            end: options?.end ?? "top 50%",
            scrub: options?.scrub ?? false,
          },
        },
      );
    }, ref);

    return () => ctx.revert();
  }, [
    options?.y,
    options?.duration,
    options?.delay,
    options?.ease,
    options?.start,
    options?.end,
    options?.scrub,
  ]);

  return ref;
}