입장 애니메이션 훅

import {
  useFadeIn,
  useSlideUp,
  useSlideDown,
  useSlideLeft,
  useSlideRight,
  useScaleIn,
  useBounceIn,
  useSpringMotion,
} from '@hua-labs/motion-core'

interface EntranceMotionReturn<T extends MotionElement = HTMLDivElement>
  extends BaseMotionReturn<T> {
  pause: () => void
  resume: () => void
}

interface BaseMotionReturn<T> {
  ref: RefObject<T | null>
  isVisible: boolean
  isAnimating: boolean
  style: MotionStyle
  progress: number   // 0 ~ 1
  start: () => void
  stop: () => void
  reset: () => void
}

function useFadeIn<T extends MotionElement = HTMLDivElement>(
  options?: FadeInOptions
): EntranceMotionReturn<T>

import { useFadeIn } from '@hua-labs/motion-core'

function Card() {
  const { ref, style } = useFadeIn({ delay: 200, duration: 600 })

  return (
    <div ref={ref} style={style}>
      카드 내용
    </div>
  )
}

const { ref, style, start, reset } = useFadeIn({ autoStart: false })

return (
  <div>
    <div ref={ref} style={style}>콘텐츠</div>
    <button onClick={start}>시작</button>
    <button onClick={reset}>초기화</button>
  </div>
)

function useSlideUp<T extends MotionElement = HTMLDivElement>(
  options?: SlideOptions
): EntranceMotionReturn<T>

function useSlideDown<T extends MotionElement = HTMLDivElement>(
  options?: SlideOptions
): EntranceMotionReturn<T>

function useSlideLeft<T extends MotionElement = HTMLDivElement>(
  options?: SlideOptions
): EntranceMotionReturn<T>

function useSlideRight<T extends MotionElement = HTMLDivElement>(
  options?: SlideOptions
): EntranceMotionReturn<T>

import { useSlideUp } from '@hua-labs/motion-core'

function Section() {
  const { ref, style } = useSlideUp({ delay: 100, distance: 40 })

  return <section ref={ref} style={style}>섹션 내용</section>
}

function useScaleIn<T extends MotionElement = HTMLDivElement>(
  options?: ScaleOptions
): EntranceMotionReturn<T>

import { useScaleIn } from '@hua-labs/motion-core'

function Modal() {
  const { ref, style } = useScaleIn({ initialScale: 0.8, duration: 300 })

  return <div ref={ref} style={style}>모달 내용</div>
}

function useBounceIn<T extends MotionElement = HTMLDivElement>(
  options?: BounceOptions
): EntranceMotionReturn<T>

import { useBounceIn } from '@hua-labs/motion-core'

function Badge() {
  const { ref, style } = useBounceIn({ intensity: 0.3 })

  return <span ref={ref} style={style}>NEW</span>
}

function useSpringMotion<T extends MotionElement = HTMLDivElement>(
  options: SpringMotionOptions
): BaseMotionReturn<T> & { value: number; velocity: number }

interface SpringMotionOptions extends SpringOptions {
  from: number          // 시작 값
  to: number            // 목표 값
  enabled?: boolean     // 활성화 여부
  mass?: number         // 질량 (프로필 기본값)
  stiffness?: number    // 강성 (프로필 기본값)
  damping?: number      // 감쇠 (프로필 기본값)
  restDelta?: number    // 정지 임계값
  restSpeed?: number    // 정지 속도
  autoStart?: boolean   // 자동 시작 (기본값: true)
}

import { useSpringMotion } from '@hua-labs/motion-core'

function AnimatedCounter() {
  const { value } = useSpringMotion({
    from: 0,
    to: 100,
    stiffness: 100,
    damping: 20,
    mass: 1
  })

  return <div>{Math.round(value)}</div>
}