interface TypingIndicatorProps {
  isTyping: boolean;
}

export function TypingIndicator({ isTyping }: TypingIndicatorProps) {
  if (!isTyping) {
    return null;
  }

  return (
    <div className="text-slate-500 text-sm px-3 py-2 flex items-center gap-1" data-testid="typing-indicator">
      <span>Teacher is typing</span>
      <span className="flex gap-1">
        <span className="animate-pulse">.</span>
        <span className="animate-pulse" style={{ animationDelay: '0.2s' }}>.</span>
        <span className="animate-pulse" style={{ animationDelay: '0.4s' }}>.</span>
      </span>
    </div>
  );
}
