@props([
    'value' => 0,
    'max' => 100,
    'size' => 'md',
    'variant' => 'primary',
    'label' => null,
    'showValue' => false,
    'animated' => false,
    'striped' => false,
])

@php
    $percentage = $max > 0 ? min(100, ($value / $max) * 100) : 0;
    
    // LucentUI size classes
    $sizeClasses = match($size) {
        'xs' => 'h-1',
        'sm' => 'h-1.5',
        'md' => 'h-2',
        'lg' => 'h-3',
        'xl' => 'h-4',
        default => 'h-2',
    };
    
    // LucentUI variant classes for the fill
    $variantClasses = match($variant) {
        'primary' => 'bg-primary',
        'secondary' => 'bg-base/50',
        'success' => 'bg-success',
        'danger' => 'bg-error',
        'warning' => 'bg-warning',
        'info' => 'bg-info',
        'gradient' => 'bg-gradient-to-r from-primary to-primary/60',
        default => 'bg-primary',
    };
    
    // Dynamic color based on percentage
    if ($variant === 'auto') {
        if ($percentage >= 90) {
            $variantClasses = 'bg-error';
        } elseif ($percentage >= 70) {
            $variantClasses = 'bg-warning';
        } else {
            $variantClasses = 'bg-success';
        }
    }
    
    // Animation classes
    $animatedClasses = $animated ? 'progress-striped' : '';
    $stripedClasses = $striped ? 'progress-striped' : '';
@endphp

<div {{ $attributes->merge(['class' => 'flex flex-col gap-1.5']) }}>
    {{-- Label and value row --}}
    @if($label || $showValue)
        <div class="flex items-center justify-between text-sm">
            @if($label)
                <span class="text-base/60 font-medium">{{ $label }}</span>
            @endif
            @if($showValue)
                <span class="font-semibold text-base">{{ number_format($percentage, 1) }}%</span>
            @endif
        </div>
    @endif
    
    {{-- Progress bar container --}}
    <div class="w-full bg-background-secondary rounded-full overflow-hidden {{ $sizeClasses }}">
        {{-- Progress bar fill --}}
        <div 
            class="h-full rounded-full transition-all duration-300 ease-out {{ $variantClasses }} {{ $animatedClasses }} {{ $stripedClasses }}"
            style="width: {{ $percentage }}%"
            role="progressbar"
            aria-valuenow="{{ $value }}"
            aria-valuemin="0"
            aria-valuemax="{{ $max }}"
        ></div>
    </div>
</div>