import { cn } from "@/lib/ui/variants";

export type MeterTone = "accent" | "success" | "warning" | "danger" | "info";

const meterTones: Record<MeterTone, string> = {
  accent: "bg-cinnabar",
  success: "bg-pass",
  warning: "bg-overdue",
  danger: "bg-conflict",
  info: "bg-info",
};

interface MeterProps {
  /** 0..1，超出范围自动夹取。 */
  value: number;
  tone?: MeterTone;
  label?: string;
  className?: string;
}

// 进度条：语义色填充，宽度过渡走动效 token；对读屏暴露 progressbar。
export function Meter({ value, tone = "accent", label, className }: MeterProps) {
  const pct = Math.max(0, Math.min(1, value)) * 100;
  return (
    <div
      className={cn(
        "h-1.5 w-full overflow-hidden rounded-full bg-line/60",
        className,
      )}
      role="progressbar"
      aria-valuenow={Math.round(pct)}
      aria-valuemin={0}
      aria-valuemax={100}
      aria-label={label}
    >
      <div
        className={cn(
          "h-full rounded-full transition-[width] duration-base ease-standard",
          meterTones[tone],
        )}
        style={{ width: `${pct}%` }}
      />
    </div>
  );
}