interface RingProps {
  /** Numerator (taken) */
  value: number;
  /** Denominator (total) */
  total: number;
  /** Radius of the ring (SVG units) */
  radius?: number;
  /** Stroke width */
  strokeWidth?: number;
  /** Rendered pixel size */
  size?: number;
}

export function Ring({ value, total, radius = 52, strokeWidth = 10, size = 120 }: RingProps) {
  const pct = total > 0 ? Math.round((value / total) * 100) : 0;
  const circumference = 2 * Math.PI * radius;
  const offset = circumference * (1 - pct / 100);

  return (
    <svg
      viewBox="0 0 120 120"
      width={size}
      height={size}
      aria-label={`${value} of ${total} doses taken`}
    >
      <circle
        cx="60"
        cy="60"
        r={radius}
        fill="none"
        stroke="var(--bg-inset)"
        strokeWidth={strokeWidth}
      />
      <circle
        cx="60"
        cy="60"
        r={radius}
        fill="none"
        stroke="var(--brand)"
        strokeWidth={strokeWidth}
        strokeDasharray={circumference}
        strokeDashoffset={offset}
        strokeLinecap="round"
        transform="rotate(-90 60 60)"
        style={{ transition: 'stroke-dashoffset 0.4s' }}
      />
      <text
        x="60"
        y="56"
        textAnchor="middle"
        fill="var(--ink-strong)"
        style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 500 }}
      >
        {value}
        <tspan fill="var(--ink-muted)" fontSize="14">
          /{total}
        </tspan>
      </text>
      <text
        x="60"
        y="74"
        textAnchor="middle"
        fill="var(--ink-muted)"
        fontSize="10"
        letterSpacing="1"
      >
        DOSES TAKEN
      </text>
    </svg>
  );
}
