@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;
    
    // AdminLTE size classes
    $sizeClasses = match($size) {
        'xs' => 'lte-progress-xs',
        'sm' => 'lte-progress-sm',
        'md' => '',
        'lg' => '',
        'xl' => '',
        default => '',
    };
    
    // Height style for non-standard sizes
    $heightStyle = match($size) {
        'lg' => 'height: 1.25rem;',
        'xl' => 'height: 1.5rem;',
        default => '',
    };
    
    // AdminLTE variant classes for the fill
    $variantClasses = match($variant) {
        'primary' => 'lte-bg-primary',
        'secondary' => 'lte-bg-secondary',
        'success' => 'lte-bg-success',
        'danger' => 'lte-bg-danger',
        'warning' => 'lte-bg-warning',
        'info' => 'lte-bg-info',
        'gradient' => 'lte-bg-gradient-primary',
        default => 'lte-bg-primary',
    };
    
    // Dynamic color based on percentage
    if ($variant === 'auto') {
        if ($percentage >= 90) {
            $variantClasses = 'lte-bg-danger';
        } elseif ($percentage >= 70) {
            $variantClasses = 'lte-bg-warning';
        } else {
            $variantClasses = 'lte-bg-success';
        }
    }
    
    // Animation classes - AdminLTE style
    $animatedClasses = $animated ? 'lte-progress-bar-animated' : '';
    $stripedClasses = $striped ? 'lte-progress-bar-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="lte-text-muted" style="font-weight: 500;">{{ $label }}</span>
            @endif
            @if($showValue)
                <span style="font-weight: 600;">{{ number_format($percentage, 1) }}%</span>
            @endif
        </div>
    @endif
    
    {{-- Progress bar container - AdminLTE style --}}
    <div class="lte-progress {{ $sizeClasses }}" @if($heightStyle) style="{{ $heightStyle }}" @endif>
        {{-- Progress bar fill --}}
        <div 
            class="lte-progress-bar {{ $variantClasses }} {{ $animatedClasses }} {{ $stripedClasses }}"
            style="width: {{ $percentage }}%"
            role="progressbar"
            aria-valuenow="{{ $value }}"
            aria-valuemin="0"
            aria-valuemax="{{ $max }}"
        ></div>
    </div>
</div>