/** Utilization bar: 0-100+%, warning over 70, danger over 85. */
export function UtilBar({ value, label }: { value: number | null; label?: string }) {
  if (value === null || !Number.isFinite(value)) {
    return <span className="text-text-muted">—</span>;
  }
  const clamped = Math.max(0, Math.min(100, value));
  const color = value >= 85 ? "bg-danger" : value >= 70 ? "bg-warning" : "bg-success";
  return (
    <div className="flex items-center gap-2" title={label}>
      <div className="h-1.5 w-16 overflow-hidden rounded bg-surface-1">
        <div className={`h-full ${color}`} style={{ width: `${clamped}%` }} />
      </div>
      <span className="tabular-nums text-xs text-text-secondary">{value.toFixed(0)}%</span>
    </div>
  );
}