import React, { useEffect, useState } from "react";

type Props = {
  children: string;
};
const TypingText = ({ children, ...props }: Props) => {
  const [text, setText] = useState(``);

  useEffect(() => {
    setText(children);
  });
  const [typedText, setTypedText] = useState("");

  useEffect(() => {
    if (text.length === typedText.length) {
      return;
    }

    const timeoutId = setTimeout(() => {
      setTypedText(text.slice(0, typedText.length + 1));
    }, 50);

    return () => clearTimeout(timeoutId);
  }, [text, typedText]);

  return <span>{typedText}</span>;
};
export default TypingText;
