import { cn } from "@/lib/utils"

export function RadialGauge({ value, label, detail }: { value: number; label: string; detail?: string }) {
  const radius = 24
  const circ = 2 * Math.PI * radius
  const offset = circ - (Math.min(value, 100) / 100) * circ

  const strokeColor = value > 90
    ? "stroke-red-500"
    : value > 75
      ? "stroke-amber-500"
      : "stroke-primary"

  return (
    <div className="flex flex-col items-center gap-1.5 p-2 bg-background/20 rounded-xl border border-border/40">
      <div className="relative flex h-16 w-16 items-center justify-center">
        <svg className="absolute inset-0 h-full w-full -rotate-90">
          <circle cx="32" cy="32" r={radius} className="stroke-muted fill-none" strokeWidth="4.5" />
          <circle cx="32" cy="32" r={radius} className={cn("fill-none transition-all duration-700 ease-out", strokeColor)} strokeWidth="4.5" strokeDasharray={circ} strokeDashoffset={offset} strokeLinecap="round" />
        </svg>
        <span className="text-xs font-mono font-bold tracking-tight text-foreground">{Math.round(value)}%</span>
      </div>
      <span className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">{label}</span>
      {detail && <span className="text-[10px] font-mono text-muted-foreground/80">{detail}</span>}
    </div>
  )
}