'use client'

import {
  Binary,
  Braces,
  Brain,
  Eye,
  Image as ImageIcon,
  type LucideIcon,
  Type,
  Wrench,
  Zap,
} from 'lucide-react'

/**
 * Renders a model's capabilities as labelled badges. Text + icon (never
 * color-only) so the information is accessible to color-blind users and screen
 * readers.
 */

interface CapabilityMeta {
  label: string
  icon: LucideIcon
}

// Ordered for stable rendering. Keys match `AIModelCapabilities`.
const CAPABILITY_META: Record<string, CapabilityMeta> = {
  text: { label: 'Text', icon: Type },
  vision: { label: 'Vision', icon: Eye },
  imageGeneration: { label: 'Image gen', icon: ImageIcon },
  embeddings: { label: 'Embeddings', icon: Binary },
  reasoning: { label: 'Reasoning', icon: Brain },
  toolCalling: { label: 'Tools', icon: Wrench },
  structuredOutput: { label: 'Structured', icon: Braces },
  longContext: { label: 'Long context', icon: Zap },
}

export function CapabilityBadges({
  capabilities,
  className,
}: {
  capabilities: Record<string, boolean>
  className?: string
}) {
  const active = Object.keys(CAPABILITY_META).filter((k) => capabilities?.[k])
  if (active.length === 0) {
    return <span className="text-muted-foreground text-sm">No capability data</span>
  }
  return (
    <ul className={`flex flex-wrap gap-1.5 ${className ?? ''}`} aria-label="Model capabilities">
      {active.map((key) => {
        const meta = CAPABILITY_META[key]!
        const Icon = meta.icon
        return (
          <li
            key={key}
            className="border-border bg-muted text-muted-foreground inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-xs"
          >
            <Icon size={11} aria-hidden="true" />
            {meta.label}
          </li>
        )
      })}
    </ul>
  )
}
