import type { ConversationMember } from '@chat-app/shared/chat';
import { useTranslation } from 'react-i18next';

interface Props {
  typingUserIds: string[];
  members: ConversationMember[];
}

export function TypingIndicator({ typingUserIds, members }: Props) {
  const { t } = useTranslation(['app']);
  if (typingUserIds.length === 0) return null;

  const names = typingUserIds
    .map((id) => members.find((m) => m.userId === id)?.profile?.displayName)
    .filter((n): n is string => typeof n === 'string' && n.length > 0);

  const text =
    names.length === 1
      ? t('app:chats.typing_one', { name: names[0] })
      : t('app:chats.typing_many', { count: typingUserIds.length });

  return (
    <div className="discord-chat-surface bg-surface-3 px-6 pb-1 pt-0 text-xs text-fg-muted">
      <span className="inline-flex items-center gap-2">
        <TypingDots />
        <span>{text}</span>
      </span>
    </div>
  );
}

function TypingDots() {
  return (
    <span aria-hidden="true" className="inline-flex items-center gap-0.5">
      <span className="h-1 w-1 rounded-full bg-fg-muted [animation:pulse_1.2s_ease-in-out_infinite]" />
      <span className="h-1 w-1 rounded-full bg-fg-muted [animation:pulse_1.2s_ease-in-out_infinite] [animation-delay:0.15s]" />
      <span className="h-1 w-1 rounded-full bg-fg-muted [animation:pulse_1.2s_ease-in-out_infinite] [animation-delay:0.3s]" />
    </span>
  );
}