Progress ring

import { motion } from "framer-motion";

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

interface WatchProgressRingProps {
  color?: string;
  /** Progreso de 0 a 100. */
  progress?: number;
  size?: number;
}

export default function WatchProgressRing({
  color = "#0071e3",
  progress = 72,
  size = 112,
}: WatchProgressRingProps) {
  return (
    <div
      role="progressbar"
      aria-valuenow={progress}
      aria-valuemin={0}
      aria-valuemax={100}
      className="relative grid place-items-center text-[#1d1d1f] dark:text-[#f5f5f7]"
      style={{ width: size, height: size }}
    >
      <svg viewBox="0 0 100 100" className="absolute inset-0 -rotate-90">
        <circle
          cx="50"
          cy="50"
          r={RADIUS}
          fill="none"
          strokeWidth="9"
          className="stroke-black/5 dark:stroke-white/10"
        />
        <motion.circle
          cx="50"
          cy="50"
          r={RADIUS}
          fill="none"
          stroke={color}
          strokeWidth="9"
          strokeLinecap="round"
          strokeDasharray={CIRCUMFERENCE}
          animate={{ strokeDashoffset: CIRCUMFERENCE * (1 - progress / 100) }}
          transition={{ type: "spring", stiffness: 300, damping: 30 }}
        />
      </svg>
      <motion.strong
        key={progress}
        initial={{ scale: 0.8, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        className="text-xl"
      >
        {progress}%
      </motion.strong>
    </div>
  );
}