'use client'

import { useEffect, useState } from 'react'
import { ny } from '@/lib/utils'

interface TypingAnimationProps {
   text: string
   duration?: number
   className?: string
}

export default function TypingAnimation({
   text,
   duration = 200,
   className,
}: TypingAnimationProps) {
   const [displayedText, setDisplayedText] = useState<string>('')
   const [i, setI] = useState<number>(0)

   useEffect(() => {
      const typingEffect = setInterval(() => {
         if (i < text.length) {
            setDisplayedText(text.substring(0, i + 1))
            setI(i + 1)
         }
         else {
            clearInterval(typingEffect)
         }
      }, duration)

      return () => {
         clearInterval(typingEffect)
      }
   }, [duration, i])

   return (
      <h1
         className={ny(
            'font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm',
            className,
         )}
      >
         {displayedText || text}
      </h1>
   )
}