import type { Capabilities } from "@/lib/api"

function Chip({ children, tone = "muted" }: { children: React.ReactNode; tone?: "muted" | "primary" | "warn" }) {
  const tones = {
    muted: "bg-muted text-muted-foreground",
    primary: "bg-primary/15 text-primary",
    warn: "bg-amber-500/15 text-amber-500",
  }
  return (
    <span className={`rounded px-1.5 py-0.5 text-[11px] font-medium ${tones[tone]}`}>{children}</span>
  )
}

export function CapsChips({ caps }: { caps?: Capabilities }) {
  if (!caps) return null
  return (
    <span className="inline-flex flex-wrap gap-1">
      {caps.coder && <Chip>💻 Code</Chip>}
      {caps.vision && <Chip>👁 Bild</Chip>}
      {caps.reasoning && <Chip>🧠 Reason</Chip>}
      {caps.moe && <Chip tone="primary">🧩 MoE{caps.active_b ? `·${caps.active_b}b` : ""}</Chip>}
      {caps.tools === "yes" && <Chip tone="primary">🛠 Tools</Chip>}
      {caps.tools === "likely" && <Chip tone="warn">🛠 Tools?</Chip>}
      {caps.embedding && <Chip>🔢 Embed</Chip>}
    </span>
  )
}