import type { ComponentType } from "react"
import { useRef, useEffect, useState } from "react"
import { useInView } from "framer-motion"

const message =
        "FramerOverrides is the largest library of overrides & components for Framer",

speed = 30 // raise this number to type slower

export function withTypeOut(Component): ComponentType {
    return (props) => {
        const ref = useRef(null)
        const isInView = useInView(ref)
        const [part, setPart] = useState("")
        const [index, setIndex] = useState(0)

        useEffect(() => {
            let timeout
            if (isInView && index < message.length) {
                timeout = setTimeout(() => {
                    setPart((prev) => prev + message[index])
                    setIndex(index + 1)
                }, speed)
            }
            return () => clearTimeout(timeout)
        }, [index, isInView])

        return <Component ref={ref} {...props} text={part} />
    }
}