"use client";
import React, { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

interface GsapRevealProps {
    children: React.ReactNode;
    y?: number;
    duration?: number;
    delay?: number;
}

const GsapReveal: React.FC<GsapRevealProps> = ({ children, y = 50, duration = 1, delay = 0 }) => {
    const revealRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const el = revealRef.current;
        if (!el) return;

        const tween = gsap.fromTo(el,
            { opacity: 0, y: y },
            {
                opacity: 1,
                y: 0,
                duration: duration,
                delay: delay,
                ease: 'power2.out',
                scrollTrigger: {
                    trigger: el,
                    start: 'top 90%',
                    toggleActions: 'play none none none',
                    once: true,
                },
            }
        );

        return () => {
            tween.kill();
        };
    }, [y, duration, delay]);

    return <div ref={revealRef}>{children}</div>;
};

export default GsapReveal;

