"use client"
import gsap from "gsap";
import { type HTMLAttributes, type ReactNode, useRef } from "react";
import { useReveal } from "./useReveal";

const AnimatedDiv = (
  {
    children,
    position,
    className,
    animationMode = 'to',
    scrollOnly = false,
    once = false,
    debugId,
    ...tweenVars
  }:
  gsap.TweenVars & {
    children: ReactNode,
    position: gsap.Position,
    animationMode?: 'from' | 'to',
    scrollOnly?: boolean,
    once?: boolean,
    debugId?: string,
    className?: HTMLAttributes<HTMLDivElement>['className']
  }
) => {
  const div = useRef<HTMLDivElement>(null)
  useReveal(div, {
    position,
    scrollOnly,
    once,
    debugId,
    makeReveal: (el) =>
      animationMode === 'from'
        ? gsap.from(el, { ...tweenVars, paused: true })
        : gsap.to(el, { ...tweenVars, paused: true }),
  })
  return (
    <div ref={div} className={className}>
      {children}
    </div>
  )
}

export default AnimatedDiv;