"use client";
// Adapted from Magic UI (MIT). See THIRD_PARTY_NOTICES.md.
import { type ComponentProps } from "react";
export interface AnimatedCircularProgressBarProps extends Omit<
  ComponentProps<"div">,
  "children"
> {
  value: number;
  min?: number;
  max?: number;
}
export function AnimatedCircularProgressBar({
  value,
  min = 0,
  max = 100,
  className = "",
  "aria-label": label = "Progress",
  ...props
}: AnimatedCircularProgressBarProps) {
  const low = Number.isFinite(min) ? min : 0;
  const high = Number.isFinite(max) && max > low ? max : low + 100;
  const current = Math.min(
    high,
    Math.max(low, Number.isFinite(value) ? value : low),
  );
  const percent = ((current - low) / (high - low)) * 100;
  return (
    <div
      {...props}
      className={`ynr-animated-circular-progress-bar ${className}`}
      role="progressbar"
      aria-label={label}
      aria-valuemin={low}
      aria-valuemax={high}
      aria-valuenow={current}
    >
      <svg viewBox="0 0 100 100" aria-hidden="true">
        <circle className="ynr-circular-track" cx="50" cy="50" r="44" />
        <circle
          className="ynr-circular-value"
          cx="50"
          cy="50"
          r="44"
          pathLength="100"
          strokeDasharray="100"
          strokeDashoffset={100 - percent}
        />
      </svg>
      <span aria-hidden="true">{Math.round(percent)}%</span>
    </div>
  );
}