import gsap from "gsap";
import { type HTMLAttributes,
type ReactNode, useLayoutEffect, useRef } from "react";
import { useGsapContext } from "~/app/_providers/GsapProvicer";
const AnimatedDiv = (
  {
    children,
    position,
    className,
    animationMode='to',
    ...tweenVars
  }:
  gsap.TweenVars & {
    children:ReactNode,
    position:gsap.Position,
    animationMode?: 'from'|'to',
    className?:HTMLAttributes<HTMLDivElement>['className']
  }
) => {
  const div = useRef<HTMLDivElement>(null);
  const gsapContext = useGsapContext()
  useLayoutEffect(() => {
    let tween:gsap.core.Tween;
    switch(animationMode) {
      case 'from':
        tween = gsap.from(div.current,tweenVars);
        break;
      case 'to':
        tween = gsap.to(div.current,tweenVars);
        break;
    }
    gsapContext?.addAnimation(tween,position)
  },[])
  return (
    <div ref={div} className={className}>
      {children}
    </div>
  )
}

export default AnimatedDiv;