/**
 * AI model icon using @lobehub/icons.
 * Pass the AI model display name (e.g. "anthropic/claude-3-5-sonnet-20241022")
 * as the `model` prop — lobehub's keyword regex matching handles the rest.
 */
import { memo } from 'react';
import LobehubModelIcon from '@lobehub/icons/es/features/ModelIcon';

/** Derive a readable label from the display name for the tooltip. */
export function modelDisplayLabel(displayName?: string): string {
  if (!displayName) return 'AI';
  // e.g. "anthropic/claude-3-5-sonnet-20241022" → "Claude 3 5 Sonnet 20241022"
  const last = displayName.includes('/')
    ? displayName.split('/').pop()!
    : displayName;
  return last
    .replace(/[-_]/g, ' ')
    .replace(/\b\w/g, (c) => c.toUpperCase());
}

interface ModelIconProps {
  /** AI model display name from the backend (e.g. "anthropic/claude-3-5-sonnet"). */
  model?: string;
  className?: string;
}

/** Colored AI model logo icon from @lobehub/icons.
 *  Supports 250+ AI models via keyword regex matching.
 *  Falls back to a default circle when no match is found. */
export const ModelIcon = memo(function ModelIcon({ model, className }: ModelIconProps) {
  return (
    <LobehubModelIcon
      model={model}
      type="avatar"
      size={20}
      className={className}
    />
  );
});
