export function GaugeChart({ value, label }: { value: number; label: string }) {
  const rotation = Math.min(180, Math.max(0, value * 1.8));
  return (
    <div className="text-center">
      <div className="relative mx-auto h-32 w-64 overflow-hidden">
        <div className="absolute inset-x-0 top-0 h-64 rounded-full border-[24px] border-forest/10 dark:border-white/10" />
        <div className="absolute inset-x-0 top-0 h-64 rounded-full border-[24px] border-transparent border-l-mint border-t-mint" style={{ transform: `rotate(${rotation - 135}deg)` }} />
        <div className="absolute bottom-0 left-1/2 h-1 w-24 origin-left rounded-full bg-ink dark:bg-paper" style={{ transform: `rotate(${rotation - 180}deg)` }} />
      </div>
      <p className="font-display text-4xl text-forest dark:text-mint">{value}%</p>
      <p className="text-sm font-semibold text-ink/60 dark:text-paper/60">{label}</p>
    </div>
  );
}