// src/components/content/pages-health/dim-badge.tsx — badge de statut d'une
// dimension on-page (Title / Méta desc. / Hn). Point coloré + label, façon proto
// (Frame A : `.st .d` + texte) mais avec les tokens app (emerald/amber/red) selon
// le `level` renvoyé par titleStatus/descStatus/hnStatus (Task 1).
import type { DimStatus } from "@/lib/pages/score";

const DOT_COLOR: Record<DimStatus["level"], string> = {
  ok: "bg-emerald-500",
  warn: "bg-amber-500",
  bad: "bg-red-500",
};

const TEXT_COLOR: Record<DimStatus["level"], string> = {
  ok: "text-foreground",
  warn: "text-amber-600 dark:text-amber-400",
  bad: "text-red-600 dark:text-red-400",
};

/** Statut d'une dimension : pastille de niveau + label court. */
export function DimBadge({ status }: { status: DimStatus }) {
  return (
    <span
      className={`inline-flex items-center gap-1.5 text-xs tabular-nums ${TEXT_COLOR[status.level]}`}
    >
      <span
        className={`size-1.5 shrink-0 rounded-full ${DOT_COLOR[status.level]}`}
      />
      {status.label}
    </span>
  );
}