import React from 'react';

export default function TypingIndicator({ users }) {
  if (!users || users.length === 0) return null;

  const getTypingText = () => {
    if (users.length === 1) {
      return <><strong>{users[0].name}</strong> is typing</>;
    } else if (users.length === 2) {
      return <><strong>{users[0].name}</strong> and <strong>{users[1].name}</strong> are typing</>;
    } else if (users.length === 3) {
      return <><strong>{users[0].name}</strong>, <strong>{users[1].name}</strong>, and <strong>{users[2].name}</strong> are typing</>;
    } else {
      return <><strong>Several people</strong> are typing</>;
    }
  };

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