import { useState, useEffect } from "react";

interface TypewriterProps {
  words: string[];
  loop?: boolean;
  typingSpeed?: number;   // ms per letter
  deletingSpeed?: number; // ms per letter
  delay?: number;         // ms before deleting starts
  className?: string;
}

const Typewriter: React.FC<TypewriterProps> = ({
  words,
  loop = true,
  typingSpeed = 100,
  deletingSpeed = 50,
  delay = 1500,
  className = "",
}) => {
  const [text, setText] = useState("");
  const [wordIndex, setWordIndex] = useState(0);
  const [isDeleting, setIsDeleting] = useState(false);

  useEffect(() => {
    const currentWord = words[wordIndex % words.length];

    let timer: NodeJS.Timeout;

    if (isDeleting) {
      timer = setTimeout(() => {
        setText(currentWord.substring(0, text.length - 1));
      }, deletingSpeed);
    } else {
      timer = setTimeout(() => {
        setText(currentWord.substring(0, text.length + 1));
      }, typingSpeed);
    }

    if (!isDeleting && text === currentWord) {
      timer = setTimeout(() => setIsDeleting(true), delay);
    } else if (isDeleting && text === "") {
      setIsDeleting(false);
      setWordIndex((prev) => prev + 1);
    }

    return () => clearTimeout(timer);
  }, [text, isDeleting, wordIndex, words, typingSpeed, deletingSpeed, delay]);

  return <div className="uppercase font-bold text-lg font-jengle text-center">{text}</div>;
};

export default Typewriter;