// frontend/components/journey/Gauge.tsx — 반원 게이지 (원본 Gauge)
import type { JourneyGauge } from "@/lib/types";

const LEN = Math.PI * 64;

export function Gauge({ pct, tone, val, unit, label, sub }: JourneyGauge) {
  const color = tone === "ink" ? "var(--ink)" : `var(--${tone})`;
  return (
    <div className="gauge">
      <svg viewBox="0 0 160 104" aria-hidden>
        <path
          d="M16 88 A64 64 0 0 1 144 88"
          fill="none"
          stroke="var(--card-2)"
          strokeWidth="13"
          strokeLinecap="round"
        />
        <path
          d="M16 88 A64 64 0 0 1 144 88"
          fill="none"
          stroke={color}
          strokeWidth="13"
          strokeLinecap="round"
          strokeDasharray={`${(LEN * pct) / 100} ${LEN}`}
        />
      </svg>
      <div
        style={{
          marginTop: "-50px",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
        }}
      >
        <div className="gval">{val}</div>
        <div className="gunit">{unit}</div>
      </div>
      <div className="glabel">{label}</div>
      <div className="gsub">{sub}</div>
    </div>
  );
}