import * as React from "react";
import { cn } from "@/lib/utils";

/**
 * Single-hue magnitude meter (thin 4px bar, rounded ends, muted track). Server-safe.
 * Values are always written next to it in text tokens; the bar only adds proportion.
 */
export function Meter({ value, max, className, tone = "accent", label }: { value: number | null | undefined; max: number; className?: string; tone?: "accent" | "muted"; label?: string }) {
  const pct = value === null || value === undefined || !Number.isFinite(value) || max <= 0 ? 0 : Math.max(0, Math.min(100, (value / max) * 100));
  return (
    <span className={cn("block h-1 w-full overflow-hidden rounded-full bg-bg-muted", className)} role="img" aria-label={label ?? (value === null || value === undefined ? "no data" : `${Math.round(pct)}% of maximum`)}>
      {pct > 0 ? <span className={cn("block h-full rounded-full", tone === "accent" ? "bg-accent" : "bg-fg-subtle")} style={{ width: `${Math.max(pct, 2)}%` }} /> : null}
    </span>
  );
}