interface CircularProgressProps {
  percent: number
  size?: number
  strokeWidth?: number
  color?: string
}

/** SVG circular progress ring with centered percentage label. */
export function CircularProgress({
  percent,
  size = 44,
  strokeWidth = 3.5,
  color = '#2563EB',
}: CircularProgressProps) {
  const cx = size / 2
  const radius = cx - strokeWidth
  const circumference = 2 * Math.PI * radius
  const offset = circumference - (Math.min(percent, 100) / 100) * circumference

  return (
    <div className="relative flex items-center justify-center flex-shrink-0" style={{ width: size, height: size }}>
      <svg className="-rotate-90" width={size} height={size}>
        <circle cx={cx} cy={cx} r={radius} fill="none" stroke="#e2e8f0" strokeWidth={strokeWidth} />
        <circle
          cx={cx} cy={cx} r={radius}
          fill="none"
          stroke={color}
          strokeWidth={strokeWidth}
          strokeLinecap="round"
          strokeDasharray={circumference}
          strokeDashoffset={offset}
        />
      </svg>
      <span className="absolute text-[10px] font-bold text-slate-700">{percent}%</span>
    </div>
  )
}
