'use client'

import { motion, useScroll, useTransform } from 'framer-motion'
import type { FC, ReactNode } from 'react'
import { useRef } from 'react'
import { ny } from '@/lib/utils'

interface TextRevealByWordProps {
   text: string
   className?: string
}

export const TextRevealByWord: FC<TextRevealByWordProps> = ({
   text,
   className,
}) => {
   const targetRef = useRef<HTMLDivElement | null>(null)

   const { scrollYProgress } = useScroll({
      target: targetRef,
   })
   const words = text.split(' ')

   return (
      <div ref={targetRef} className={ny('relative z-0 h-[200vh]', className)}>
         <div className="sticky top-0 mx-auto flex h-[50%] max-w-4xl items-center bg-transparent px-[1rem] py-[5rem]">
            <p
               ref={targetRef}
               className="flex flex-wrap p-5 text-2xl font-bold text-black/20 dark:text-white/20 md:p-8 md:text-3xl lg:p-10 lg:text-4xl xl:text-5xl"
            >
               {words.map((word, i) => {
                  const start = i / words.length
                  const end = start + 1 / words.length
                  return (
                     <Word key={i} progress={scrollYProgress} range={[start, end]}>
                        {word}
                     </Word>
                  )
               })}
            </p>
         </div>
      </div>
   )
}

interface WordProps {
   children: ReactNode
   progress: any
   range: [number, number]
}

const Word: FC<WordProps> = ({ children, progress, range }) => {
   const opacity = useTransform(progress, range, [0, 1])
   return (
      <span className="xl:lg-3 relative mx-1 lg:mx-2.5">
         <span className="absolute opacity-30">{children}</span>
         <motion.span style={{ opacity }} className="text-black dark:text-white">
            {children}
         </motion.span>
      </span>
   )
}

export default TextRevealByWord