type CircularProgressProps = {
  value: number;
  min?: number;
  max?: number;
  size?: number;
  strokeWidth?: number;
};

export function CircularProgress({
  value,
  min = 0,
  max = 100,
  size = 80,
  strokeWidth = 6,
}: CircularProgressProps) {
  const radius = (size - strokeWidth) / 2;
  const circumference = 2 * Math.PI * radius;

  // normalize value to 0–1
  const normalized = max === min ? 0 : (value - min) / (max - min);

  // clamp between 0 and 1
  const clamped = Math.min(1, Math.max(0, normalized));

  const offset = circumference * (1 - clamped);

  return (
    <svg width={size} height={size}>
      {/* background */}
      <circle
        cx={size / 2}
        cy={size / 2}
        r={radius}
        stroke="#fff"
        strokeOpacity={0.5}
        strokeWidth={strokeWidth}
        fill="transparent"
      />

      {/* progress */}
      <circle
        cx={size / 2}
        cy={size / 2}
        r={radius}
        stroke="#fff"
        strokeWidth={strokeWidth}
        fill="transparent"
        strokeDasharray={circumference}
        strokeDashoffset={offset}
        strokeLinecap="round"
        style={{
          transform: "rotate(-90deg)",
          transformOrigin: "50% 50%",
          transition: "stroke-dashoffset 0.4s ease",
        }}
      />

      {/* label */}
      <text
        x="50%"
        y="50%"
        textAnchor="middle"
        dy=".3em"
        fontSize="24"
        fontWeight="600"
        fontFamily="Satoshi"
        color="#fff"
      >
        {value}
      </text>
    </svg>
  );
}
