/**
 * TypingIndicator Component
 * Shows animated typing indicator with user names
 */

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

export default function TypingIndicator({ typingUsers, maxDisplay = 3 }) {
  if (!typingUsers || typingUsers.length === 0) {
    return null;
  }

  const displayUsers = typingUsers.slice(0, maxDisplay);
  const hiddenCount = typingUsers.length - maxDisplay;

  const getTypingText = () => {
    if (displayUsers.length === 1) {
      return `${displayUsers[0]} is typing`;
    }
    if (displayUsers.length === 2) {
      return `${displayUsers[0]} and ${displayUsers[1]} are typing`;
    }
    if (displayUsers.length === 3) {
      return `${displayUsers[0]}, ${displayUsers[1]}, and ${displayUsers[2]} are typing`;
    }
    return `${displayUsers.join(', ')}, and ${hiddenCount} more are typing`;
  };

  return (
    <div className="typing-indicator-container">
      <div className="typing-indicator-avatar">
        {displayUsers[0]?.[0]?.toUpperCase() || '?'}
      </div>
      <div className="typing-indicator-content">
        <div className="typing-dots">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <span className="typing-text">{getTypingText()}</span>
      </div>
    </div>
  );
}