import * as React from "react";
import { Fig } from "../Fig/Fig";

export interface ProgressRingProps {
  /** 0-100 */
  percent: number;
  /** Center figure - defaults to the rounded percent value. */
  value?: React.ReactNode;
  unit?: string;
  label?: React.ReactNode;
  size?: number;
  className?: string;
}

const RADIUS = 64;
const CIRCUMFERENCE = 2 * Math.PI * RADIUS;

export function ProgressRing({
  percent,
  value,
  unit,
  label,
  size = 150,
  className,
}: ProgressRingProps) {
  const clamped = Math.max(0, Math.min(100, percent));
  const offset = CIRCUMFERENCE * (1 - clamped / 100);
  const classes = ["ads-ring"];
  if (className) classes.push(className);

  return (
    <div className={classes.join(" ")} style={{ width: size, height: size }}>
      <svg viewBox="0 0 150 150" width={size} height={size}>
        <circle cx="75" cy="75" r={RADIUS} className="ads-ring__track" />
        <circle
          cx="75"
          cy="75"
          r={RADIUS}
          className="ads-ring__arc"
          strokeDasharray={CIRCUMFERENCE}
          strokeDashoffset={offset}
        />
      </svg>
      <span className="ads-ring__mid">
        <Fig value={value ?? Math.round(clamped)} unit={unit} />
        {label !== undefined && <span className="ads-label">{label}</span>}
      </span>
    </div>
  );
}