import { useTypingStore } from '../stores/typing.ts';
import { useAuthStore } from '../stores/auth.ts';

interface TypingIndicatorProps {
  channelId: string;
}

export function TypingIndicator({ channelId }: TypingIndicatorProps) {
  const typingUsers = useTypingStore((state) => state.typingUsers[channelId] || []);
  const currentUser = useAuthStore((state) => state.user);

  // Filter out current user
  const others = typingUsers.filter(u => u.userId !== currentUser?.id);

  if (others.length === 0) return null;

  const names = others.map(u => u.username);

  let text: string;
  if (names.length === 1) {
    text = `<${names[0]}> is typing...`;
  } else if (names.length === 2) {
    text = `<${names[0]}> and <${names[1]}> are typing...`;
  } else {
    text = `${names.length} users are typing...`;
  }

  return (
    <div className="px-4 py-1 text-xs text-gb-fg-f font-mono animate-pulse">
      {text}
    </div>
  );
}