import { useChatStore } from '../store/chatStore';

interface TypingIndicatorProps {
  conversationId: string;
}

export function TypingIndicator({ conversationId }: TypingIndicatorProps) {
  const { typingUsers, userId } = useChatStore();

  const othersTyping = (typingUsers[conversationId] || []).filter(
    (id) => id !== userId,
  );

  if (othersTyping.length === 0) return <div className="h-6" />; // Keep space to prevent jumping

  return (
    <div className="px-4 py-1 text-xs text-gray-500 italic animate-pulse">
      {othersTyping.length === 1
        ? `Quelqu'un écrit...`
        : `${othersTyping.length} personnes écrivent...`}
    </div>
  );
}
