'use client';

import { cn } from '@/lib/utils';

interface TypingIndicatorProps {
  roomType?: string;
  typers: Array<{ userId: string; userName: string }>;
  className?: string;
}

function isGroupRoomType(type?: string) {
  return type === 'GROUP' || type === 'GENERAL';
}

export function TypingIndicator({ roomType, typers, className }: TypingIndicatorProps) {
  if (!typers.length) return null;

  const group = isGroupRoomType(roomType);
  let label = 'печатает';

  if (group) {
    if (typers.length === 1) {
      label = `${typers[0]!.userName} печатает`;
    } else if (typers.length === 2) {
      label = `${typers[0]!.userName} и ${typers[1]!.userName} печатают`;
    } else {
      label = `${typers.length} участника печатают`;
    }
  }

  return (
    <div
      className={cn(
        'flex items-center gap-2 px-4 py-1 text-xs text-[#667085] transition-all duration-300 animate-in fade-in slide-in-from-bottom-1',
        className
      )}
    >
      <span className="inline-flex items-center gap-1">
        <span className="inline-flex gap-0.5">
          <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-[#3390ec]/70 [animation-delay:0ms]" />
          <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-[#3390ec]/70 [animation-delay:120ms]" />
          <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-[#3390ec]/70 [animation-delay:240ms]" />
        </span>
      </span>
      <span>{group ? label : 'печатает…'}</span>
    </div>
  );
}