'use client'

import type { Variants } from 'framer-motion'
import { motion } from 'framer-motion'
import { useMemo } from 'react'

interface FadeTextProps {
   className?: string
   direction?: 'up' | 'down' | 'left' | 'right'
   framerProps?: Variants
   text: string
}

export function FadeText({
   direction = 'up',
   className,
   framerProps = {
      hidden: { opacity: 0 },
      show: { opacity: 1, transition: { type: 'spring' } },
   },
   text,
}: FadeTextProps) {
   const directionOffset = useMemo(() => {
      const map = { up: 10, down: -10, left: -10, right: 10 }
      return map[direction]
   }, [direction])

   const axis = direction === 'up' || direction === 'down' ? 'y' : 'x'

   const FADE_ANIMATION_VARIANTS = useMemo(() => {
      const { hidden, show, ...rest } = framerProps as {
         [name: string]: { [name: string]: number, opacity: number }
      }

      return {
         ...rest,
         hidden: {
            ...(hidden ?? {}),
            opacity: hidden?.opacity ?? 0,
            [axis]: hidden?.[axis] ?? directionOffset,
         },
         show: {
            ...(show ?? {}),
            opacity: show?.opacity ?? 1,
            [axis]: show?.[axis] ?? 0,
         },
      }
   }, [directionOffset, axis, framerProps])

   return (
      <motion.div
         initial="hidden"
         animate="show"
         viewport={{ once: true }}
         variants={FADE_ANIMATION_VARIANTS}
      >
         <motion.span className={className}>{text}</motion.span>
      </motion.div>
   )
}