'use client'

import type { Variants } from 'framer-motion'
import { AnimatePresence, motion } from 'framer-motion'
import { ny } from '@/lib/utils'

interface GradualSpacingProps {
   text: string
   duration?: number
   delayMultiple?: number
   framerProps?: Variants
   className?: string
}

export default function GradualSpacing({
   text,
   duration = 0.5,
   delayMultiple = 0.04,
   framerProps = {
      hidden: { opacity: 0, x: -20 },
      visible: { opacity: 1, x: 0 },
   },
   className,
}: GradualSpacingProps) {
   return (
      <div className="flex justify-center space-x-1">
         <AnimatePresence>
            {text.split('').map((char, i) => (
               <motion.h1
                  key={i}
                  initial="hidden"
                  animate="visible"
                  exit="hidden"
                  variants={framerProps}
                  transition={{ duration, delay: i * delayMultiple }}
                  className={ny('drop-shadow-sm ', className)}
               >
                  {char === ' ' ? <span>&nbsp;</span> : char}
               </motion.h1>
            ))}
         </AnimatePresence>
      </div>
   )
}