import React from 'react';

const TypingIndicator = ({ typingUsers = [] }) => {
  if (typingUsers.length === 0) return null;

  const getTypingText = () => {
    if (typingUsers.length === 1) {
      return `${typingUsers[0]} tape un message...`;
    } else if (typingUsers.length === 2) {
      return `${typingUsers[0]} et ${typingUsers[1]} tapent un message...`;
    } else {
      return `${typingUsers[0]} et ${typingUsers.length - 1} autres tapent un message...`;
    }
  };

  return (
    <div className="flex items-center px-4 py-3 bg-gray-50 border-t border-gray-100 typing-indicator-enter">
      <div className="flex space-x-1 mr-3">
        <div className="w-2 h-2 bg-blue-400 rounded-full typing-dot"></div>
        <div className="w-2 h-2 bg-blue-400 rounded-full typing-dot"></div>
        <div className="w-2 h-2 bg-blue-400 rounded-full typing-dot"></div>
      </div>
      <span className="text-sm text-gray-600 italic animate-pulse">
        {getTypingText()}
      </span>
    </div>
  );
};

export default TypingIndicator;
