'use client'

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

interface WordPullUpProps {
   words: string
   delayMultiple?: number
   wrapperFramerProps?: Variants
   framerProps?: Variants
   className?: string
}

export default function WordPullUp({
   words,
   wrapperFramerProps = {
      hidden: { opacity: 0 },
      show: {
         opacity: 1,
         transition: {
            staggerChildren: 0.2,
         },
      },
   },
   framerProps = {
      hidden: { y: 20, opacity: 0 },
      show: { y: 0, opacity: 1 },
   },
   className,
}: WordPullUpProps) {
   return (
      <motion.h1
         variants={wrapperFramerProps}
         initial="hidden"
         animate="show"
         className={ny(
            'font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm',
            className,
         )}
      >
         {words.split(' ').map((word, i) => (
            <motion.span
               key={i}
               variants={framerProps}
               style={{ display: 'inline-block', paddingRight: '8px' }}
            >
               {word === '' ? <span>&nbsp;</span> : word}
            </motion.span>
         ))}
      </motion.h1>
   )
}