/**
 * ScopesBadge — the scope chips on an API-key row (TASK-0128). The
 * accessible description (what each scope grants) is exposed via
 * `aria-describedby` (the a11y requirement: table scope descriptions
 * reachable without a tooltip).
 */
import { cn } from "@/lib/utils";
import { SCOPE_GRANTS, type ApiKeyScope } from "@/lib/api-keys";

const TONE: Record<ApiKeyScope, string> = {
  READ: "bg-sky-500/15 text-sky-700 dark:text-sky-300",
  WRITE: "bg-amber-500/15 text-amber-700 dark:text-amber-300",
  ADMIN: "bg-violet-500/15 text-violet-700 dark:text-violet-300",
};

export function ScopesBadge({ scopes, idPrefix }: { scopes: string[]; idPrefix: string }) {
  return (
    <span className="inline-flex flex-wrap items-center gap-1">
      {scopes.map((s) => {
        const scope = s as ApiKeyScope;
        const descId = `${idPrefix}-scope-${s}`;
        return (
          <span
            key={s}
            aria-describedby={descId}
            title={SCOPE_GRANTS[scope] ?? s}
            className={cn(
              "inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium",
              TONE[scope] ?? "bg-muted text-muted-foreground",
            )}
          >
            {s}
            {/* The description lives in the DOM (screen-reader + tooltip source). */}
            <span id={descId} className="sr-only">
              {SCOPE_GRANTS[scope] ?? ""}
            </span>
          </span>
        );
      })}
    </span>
  );
}