Gauge

"use client";

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

export interface GaugeProps {
  value: number;
  max?: number;
  label?: string;
  /** Fractions where the arc turns amber, then red. */
  thresholds?: [warn: number, danger: number];
  format?: (v: number) => string;
  size?: number;
  className?: string;
}

/** A half-circle gauge for scores, capacity and SLAs. */
export function Gauge({ value, max = 100, label, thresholds = [0.7, 0.9], format = (v) => `${Math.round(v)}%`, size = 200, className }: GaugeProps) {
  const t = Math.min(1, Math.max(0, value / max));
  const color = t >= thresholds[1] ? "var(--destructive)" : t >= thresholds[0] ? "#f59e0b" : "var(--chart-4)";
  const r = 80;
  const arc = `M 20 100 A ${r} ${r} 0 0 1 180 100`;
  return (
    <div className={cn("relative inline-flex flex-col items-center", className)} style={{ width: size }} role="meter" aria-valuemin={0} aria-valuemax={max} aria-valuenow={value} aria-label={label}>
      <svg viewBox="0 0 200 112" className="w-full overflow-visible">
        <path d={arc} fill="none" stroke="var(--muted)" strokeWidth={14} strokeLinecap="round" />
        <motion.path d={arc} fill="none" stroke={color} strokeWidth={14} strokeLinecap="round" initial={{ pathLength: 0 }} animate={{ pathLength: t, stroke: color }} transition={{ type: "spring", stiffness: 60, damping: 16 }} />
      </svg>
      <div className="absolute inset-x-0 bottom-1 text-center">
        <p className="text-3xl font-semibold tracking-tight tabular-nums">{format(value)}</p>
        {label && <p className="text-xs text-muted-foreground">{label}</p>}
      </div>
    </div>
  );
}