import React from 'react'
import useRevealOnScroll from '../hooks/useRevealOnScroll'

type RevealProps = {
  children: React.ReactNode
  className?: string
  activeClass?: string
  threshold?: number
  rootMargin?: string
  durationMs?: number
  distance?: number
  delayMs?: number
  once?: boolean
}

export function Reveal({
  children,
  className = '',
  activeClass = 'opacity-100 translate-y-0',
  threshold = 0.12,
  rootMargin = '0px',
  durationMs = 700,
  distance = 24,
  delayMs = 0,
  once = true,
}: RevealProps) {
  const { ref, isVisible } = useRevealOnScroll({ threshold, rootMargin, once })

  const initialStyle: React.CSSProperties = {
    opacity: 0,
    transform: `translateY(${distance}px)`,
    transitionProperty: 'opacity, transform',
    transitionTimingFunction: 'cubic-bezier(.2,.8,.2,1)',
    transitionDuration: `${durationMs}ms`,
    transitionDelay: `${delayMs ?? 0}ms`,
  }

  const visibleStyle: React.CSSProperties = {
    opacity: 1,
    transform: 'translateY(0px)',
    transitionProperty: 'opacity, transform',
    transitionTimingFunction: 'cubic-bezier(.2,.8,.2,1)',
    transitionDuration: `${durationMs}ms`,
    transitionDelay: `${delayMs ?? 0}ms`,
  }

  return (
    <div ref={ref as any} className={className} style={isVisible ? { ...visibleStyle } : { ...initialStyle }}>
      {children}
    </div>
  )
}

export default Reveal
