import { AnimatePresence, m, useReducedMotion } from 'framer-motion'
import type { ReactNode } from 'react'
import './RevealContent.scss'

type RevealContentProps = {
  children: ReactNode
  className?: string
  fallback: ReactNode
  loading: boolean
}

export function RevealContent({
  children,
  className = '',
  fallback,
  loading,
}: RevealContentProps) {
  const shouldReduceMotion = useReducedMotion()
  const transition = {
    duration: shouldReduceMotion ? 0 : 0.2,
    ease: 'easeOut',
  } as const

  return (
    <div className={`reveal-content ${className}`}>
      <AnimatePresence initial={false}>
        {loading ? (
          <m.div
            key="fallback"
            className="reveal-content__fallback"
            initial={{ opacity: 1 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={transition}
          >
            {fallback}
          </m.div>
        ) : (
          <m.div
            key="content"
            className="reveal-content__content"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={transition}
          >
            {children}
          </m.div>
        )}
      </AnimatePresence>
    </div>
  )
}
