import type { ReactNode } from 'react';

/** Map model IDs to colored circles (fallback for AI sender avatars) */
export function ModelIcon({ modelId, className }: { modelId?: string; className?: string }): ReactNode {
  const colors: Record<string, string> = {
    claude: 'bg-orange-500',
    gpt: 'bg-green-600',
    gemini: 'bg-blue-600',
    deepseek: 'bg-purple-600',
    o1: 'bg-pink-600',
    o3: 'bg-pink-700',
    o4: 'bg-pink-800',
    ai: 'bg-primary',
  };

  const color = modelId ? (colors[modelId.toLowerCase()] ?? 'bg-primary') : 'bg-primary';

  return (
    <span
      className={`inline-block h-5 w-5 rounded-full ${color} flex items-center justify-center ${className ?? ''}`}
      title={modelId}
    >
      <span className="text-[10px] font-bold text-white">A</span>
    </span>
  );
}
