@props(['percent' => 0, 'size' => 62])
@php
    // Circumference of r=25 in the 62-unit box. The offset is what is NOT
    // filled, so a full ring is 0 and an empty one is the whole circumference.
    $c = 157;
    $o = (int) round($c * (1 - min(100, max(0, (float) $percent)) / 100));
@endphp
<div class="relative grid place-items-center">
    <svg class="metric-ring" viewBox="0 0 62 62" style="--c:{{ $c }};--o:{{ $o }};width:{{ $size }}px;height:{{ $size }}px" aria-hidden="true">
        <circle class="track" cx="31" cy="31" r="25" />
        <circle class="value" cx="31" cy="31" r="25" />
    </svg>
    <b class="absolute font-mono text-[13px] font-medium text-ink">{{ (int) round($percent) }}%</b>
</div>