import { useTypewriter } from '@/hooks/useTypewriter';

interface TypewriterTextProps {
  text: string;
  speed?: number;
  className?: string;
}

export function TypewriterText({ text, speed = 50, className }: TypewriterTextProps) {
  const { displayText, isComplete } = useTypewriter(text, speed);

  return (
    <span className={className}>
      {displayText}
      {!isComplete && (
        <span className="inline-block w-2.5 h-6 bg-cyan-400 ml-1 rtl:ml-0 rtl:mr-1 animate-blink translate-y-1" />
      )}
    </span>
  );
}
