interface RingGaugeProps {
  value: number;
  max?: number;
  label?: string;
  size?: number;
}

export function RingGauge({ value, max = 100, label, size = 100 }: RingGaugeProps) {
  const pct = Math.min(Math.max(value / max, 0), 1);
  const r = (size - 10) / 2;
  const circumference = 2 * Math.PI * r;
  const offset = circumference * (1 - pct);

  return (
    <div class="flex flex-col items-center mb-4">
      <svg width={size} height={size} class="-rotate-90">
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--z-card-bg)" stroke-width="6" />
        <circle
          cx={size / 2} cy={size / 2} r={r} fill="none"
          stroke="var(--z-accent)"
          stroke-width="6"
          stroke-linecap="round"
          stroke-dasharray={circumference}
          stroke-dashoffset={offset}
          class="transition-all duration-700"
        />
      </svg>
      <div class="flex flex-col items-center -mt-[calc(50%+12px)]" style={{ marginTop: `-${size / 2 + 12}px` }}>
        <span class="font-mono text-xl font-semibold">{Math.round(pct * 100)}%</span>
      </div>
      <div style={{ height: `${size / 2 - 20}px` }} />
      {label && <p class="text-[var(--z-font-sm)] font-mono mt-1" style={{ color: "var(--z-muted)" }}>{label}</p>}
    </div>
  );
}
