@props(['value' => 0, 'max' => 100, 'label' => null, 'showValue' => true])

@php
    $percent = $max > 0 ? min(100, max(0, round($value / $max * 100))) : 0;
@endphp

<div {{ $attributes->class('w-full') }}>
    @if ($label || $showValue)
        <div class="mb-1.5 flex items-center justify-between text-xs">
            @if ($label)<span class="font-medium text-slate-700">{{ $label }}</span>@endif
            @if ($showValue)<span class="tabular-nums text-slate-500">{{ $percent }}%</span>@endif
        </div>
    @endif

    <div class="h-2 w-full overflow-hidden rounded-full bg-slate-200"
         role="progressbar"
         aria-valuenow="{{ $percent }}"
         aria-valuemin="0"
         aria-valuemax="100"
         @if ($label) aria-label="{{ $label }}" @endif>
        <div class="h-full rounded-full bg-brand-700 transition-all duration-500" style="width: {{ $percent }}%"></div>
    </div>
</div>
