import React from 'react';
import './TypingIndicator.css';

interface TypingIndicatorProps {
  firstName: string;
  isVisible: boolean;
}

/**
 * Typing Indicator Component
 * Shows an animated "User is typing..." message
 */
const TypingIndicator: React.FC<TypingIndicatorProps> = ({ firstName, isVisible }) => {
  if (!isVisible) {
    return null;
  }

  return (
    <div className="typing-indicator">
      <span className="typing-text">{firstName} is typing</span>
      <div className="typing-dots">
        <span className="dot"></span>
        <span className="dot"></span>
        <span className="dot"></span>
      </div>
    </div>
  );
};

export default TypingIndicator;
