@props([
    'progress' => 0,
    'label' => '',
    'color' => 'primary',
    'showPercentage' => true,
    'size' => 'md' // sm, md, lg
])

@php
    $colors = [
        'primary' => 'bg-primary-600',
        'success' => 'bg-green-500',
        'warning' => 'bg-yellow-500',
        'danger' => 'bg-red-500',
        'info' => 'bg-blue-500',
    ];
    $bgColor = $colors[$color] ?? $colors['primary'];
    
    $sizes = [
        'sm' => 'h-2',
        'md' => 'h-3',
        'lg' => 'h-4',
    ];
    $sizeClass = $sizes[$size] ?? $sizes['md'];
    
    $progress = min(100, max(0, $progress));
@endphp

<div class="w-full">
    @if($label)
    <div class="flex justify-between mb-1">
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ $label }}</span>
        @if($showPercentage)
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ $progress }}%</span>
        @endif
    </div>
    @endif
    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full {{ $sizeClass }}">
        <div 
            class="{{ $bgColor }} {{ $sizeClass }} rounded-full transition-all duration-500 ease-out"
            style="width: {{ $progress }}%"
        ></div>
    </div>
</div>
