@props([
    'value' => 0,
    'max' => 100,
    'colorZones' => true,
    'label' => '',
    'size' => 'md',
    'showValue' => true,
    'animate' => true,
])

@php
$pct = min(100, max(0, ($value / max(1, $max)) * 100));
$color = $colorZones ? ($pct >= 75 ? 'bg-green-500' : ($pct >= 50 ? 'bg-amber-500' : 'bg-red-500')) : 'bg-primary-600';
$sizeMap = ['sm' => 'h-1.5', 'md' => 'h-2.5', 'lg' => 'h-4'];
$height = $sizeMap[$size] ?? $sizeMap['md'];
@endphp

<div {{ $attributes->merge(['class' => 'w-full']) }}>
    @if($showValue || $label)
        <div class="flex items-center justify-between mb-1">
            @if($label)
                <span class="text-xs font-medium text-slate-600 dark:text-slate-400">{{ $label }}</span>
            @endif
            @if($showValue)
                <span class="text-xs font-medium text-slate-600 dark:text-slate-400">{{ round($pct) }}%</span>
            @endif
        </div>
    @endif
    <div class="w-full bg-slate-200 dark:bg-slate-700 rounded-full {{ $height }}">
        <div class="{{ $height }} rounded-full {{ $color }} {{ $animate ? 'transition-all duration-700 ease-out' : '' }}" style="width: {{ $pct }}%"></div>
    </div>
</div>