import { motion } from 'framer-motion';
import { useEffect, useState } from 'react';

interface TypewriterTextProps {
    text: string;
    speed?: number; // kecepatan per huruf (ms)
    className?: string;
    cursorBlinkSpeed?: number; // kecepatan berkedip cursor
}

export default function TypewriterText({
    text,
    speed = 50,
    className = '',
    cursorBlinkSpeed = 500,
}: TypewriterTextProps) {
    const [displayedText, setDisplayedText] = useState<string[]>([]);
    const [isFinished, setIsFinished] = useState(false);

    useEffect(() => {
        setDisplayedText([]);
        setIsFinished(false);
        let index = 0;
        let timeoutId: NodeJS.Timeout;

        const typeNext = () => {
            setDisplayedText((prev) => [...prev, text[index]]);
            index++;
            if (index < text.length) {
                timeoutId = setTimeout(typeNext, speed);
            } else {
                setIsFinished(true);
            }
        };

        timeoutId = setTimeout(typeNext, speed);
        return () => clearTimeout(timeoutId);
    }, [text, speed]);

    return (
        <span className={`inline-block font-bold ${className}`}>
            {displayedText.map((char, i) => (
                <motion.span
                    key={i}
                    initial={{ opacity: 0, y: 5 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.15 }}
                    className="inline-block"
                >
                    {char === ' ' ? '\u00A0' : char}
                </motion.span>
            ))}

            {/* Cursor animasi */}
            <motion.span
                initial={{ opacity: 1 }}
                animate={isFinished ? { opacity: 0 } : { opacity: [1, 0, 1] }}
                transition={{
                    duration: cursorBlinkSpeed / 1000,
                    repeat: isFinished ? 0 : Infinity,
                    ease: 'easeInOut',
                }}
                className="ml-[1px] inline-block border-r-2 border-current"
            >
                &nbsp;
            </motion.span>
        </span>
    );
}