import { useState, useEffect } from "react";

interface TypingMessageProps {
  fullText: string;
  onComplete?: () => void;
  speed?: number;
}

export function TypingMessage({ fullText, onComplete, speed = 30 }: TypingMessageProps) {
  const [displayedText, setDisplayedText] = useState("");
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    if (currentIndex < fullText.length) {
      const timeout = setTimeout(() => {
        setDisplayedText(fullText.slice(0, currentIndex + 1));
        setCurrentIndex(currentIndex + 1);
      }, speed);

      return () => clearTimeout(timeout);
    } else if (onComplete) {
      onComplete();
    }
  }, [currentIndex, fullText, speed, onComplete]);

  return (
    <p className="text-white text-sm leading-relaxed whitespace-pre-line">
      {displayedText}
      {currentIndex < fullText.length && (
        <span className="inline-block w-1 h-4 bg-white/70 ml-0.5 animate-pulse" />
      )}
    </p>
  );
}
