import * as React from "react";
import { Badge } from "@/components/ui/badge";
import type { Lifecycle, ModelBadge, ModelBadgeKind } from "@/lib/models/badges";
import { cn } from "@/lib/utils";

/**
 * Presentational badge chips — no hooks, no store — so server components (public /models,
 * /compare pages) and client components share one look.
 */
const KIND_VARIANT: Record<ModelBadgeKind, "accent" | "default" | "outline" | "success" | "info"> = {
  new: "accent",
  reasoning: "default",
  vision: "default",
  coding: "default",
  fast: "outline",
  cheap: "success",
  "long-context": "info",
};

export function BadgeChips({ badges, max = 4, className, size = "sm" }: { badges: ModelBadge[]; max?: number; className?: string; size?: "xs" | "sm" }) {
  const shown = badges.slice(0, max);
  if (!shown.length) return null;
  return (
    <span className={cn("inline-flex flex-wrap items-center gap-1", className)}>
      {shown.map((b) => (
        <Badge key={b.kind} variant={KIND_VARIANT[b.kind]} title={b.title} className={cn("font-mono tracking-wide", size === "xs" ? "px-1.5 py-0 text-[9.5px] leading-[14px]" : "text-[10px] leading-[15px]")}>
          {b.label}
        </Badge>
      ))}
      {badges.length > max ? <span className="text-[10px] text-fg-subtle">+{badges.length - max}</span> : null}
    </span>
  );
}

export function LifecycleChip({ lifecycle, className }: { lifecycle: Lifecycle; className?: string }) {
  return (
    <Badge variant={lifecycle.tone} title={lifecycle.detail} className={className}>
      {lifecycle.label}
    </Badge>
  );
}