@props([
    'value' => 0,
    'max' => 100,
    'color' => 'primary',
    'size' => 'md',
    'showLabel' => false,
    'animated' => true,
    'gradient' => false,
])

@php
    $percentage = $max > 0 ? min(100, ($value / $max) * 100) : 0;
    
    $sizeClasses = match($size) {
        'sm' => 'h-1.5',
        'lg' => 'h-4',
        default => 'h-2.5',
    };
    
    $colorClasses = match($color) {
        'success' => 'bg-success',
        'warning' => 'bg-warning',
        'error' => 'bg-error',
        'info' => 'bg-info',
        default => 'bg-primary',
    };
    
    $gradientClasses = match($color) {
        'success' => 'bg-gradient-to-r from-green-400 to-emerald-500',
        'warning' => 'bg-gradient-to-r from-yellow-400 to-orange-500',
        'error' => 'bg-gradient-to-r from-red-400 to-rose-500',
        'info' => 'bg-gradient-to-r from-blue-400 to-cyan-500',
        default => 'bg-gradient-to-r from-primary to-secondary',
    };
@endphp

<div {{ $attributes->merge(['class' => 'w-full']) }}>
    @if($showLabel)
        <div class="flex justify-between items-center mb-1">
            <span class="text-sm font-medium text-color-base">{{ $slot }}</span>
            <span class="text-sm font-medium text-color-muted">{{ number_format($percentage, 0) }}%</span>
        </div>
    @endif
    
    <div class="w-full bg-neutral/30 rounded-full {{ $sizeClasses }} overflow-hidden">
        <div 
            class="{{ $gradient ? $gradientClasses : $colorClasses }} {{ $sizeClasses }} rounded-full transition-all duration-500 ease-out {{ $animated ? 'animate-progress-fill' : '' }}"
            style="width: {{ $percentage }}%"
            role="progressbar"
            aria-valuenow="{{ $value }}"
            aria-valuemin="0"
            aria-valuemax="{{ $max }}"
        >
            @if($animated && $percentage > 0)
                <div class="h-full w-full bg-white/20 animate-progress-shine"></div>
            @endif
        </div>
    </div>
</div>

@once
@push('styles')
<style>
    @keyframes progress-fill {
        from { width: 0%; }
    }
    
    @keyframes progress-shine {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
    }
    
    .animate-progress-fill {
        animation: progress-fill 1s ease-out;
    }
    
    .animate-progress-shine {
        animation: progress-shine 2s ease-in-out infinite;
    }
</style>
@endpush
@endonce