@props(['percentage' => 0, 'showValue' => true])

@php
    $value = max(0, min(100, (float) $percentage));
    $fill = match (true) {
        $value >= 80 => 'bg-emerald-500',
        $value >= 60 => 'bg-amber-500',
        default => 'bg-rose-500',
    };
@endphp

<div {{ $attributes->class('flex items-center gap-3') }}>
    <div class="h-2 flex-1 overflow-hidden rounded-full bg-slate-100">
        <div class="h-full rounded-full {{ $fill }} transition-[width]" style="width: {{ $value }}%"></div>
    </div>
    @if ($showValue)
        <span class="w-12 shrink-0 text-right text-xs font-semibold tabular-nums text-slate-600">{{ number_format($value, 1) }}%</span>
    @endif
</div>