@props([
    'percent' => 0,
    'color' => 'indigo',
    'size' => 'md',
    'showLabel' => false,
])

@php
    $percent = min(100, max(0, $percent));

    $colors = [
        'indigo' => 'bg-indigo-600 dark:bg-indigo-500',
        'green' => 'bg-green-600 dark:bg-green-500',
        'red' => 'bg-red-600 dark:bg-red-500',
        'blue' => 'bg-blue-600 dark:bg-blue-500',
        'yellow' => 'bg-yellow-500 dark:bg-yellow-400',
        'purple' => 'bg-purple-600 dark:bg-purple-500',
    ];

    $sizes = [
        'sm' => 'h-1.5',
        'md' => 'h-2.5',
        'lg' => 'h-4',
    ];

    // Auto color based on percentage for budget tracking
    if ($color === 'auto') {
        $color = match(true) {
            $percent >= 100 => 'red',
            $percent >= 80 => 'yellow',
            default => 'green',
        };
    }
@endphp

<div {{ $attributes->merge(['class' => 'w-full']) }}>
    @if($showLabel)
        <div class="flex justify-between items-center mb-1">
            <span class="text-sm text-gray-600 dark:text-gray-400">{{ $slot }}</span>
            <span class="text-sm font-medium text-gray-900 dark:text-white">{{ number_format($percent, 0) }}%</span>
        </div>
    @endif

    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full {{ $sizes[$size] ?? $sizes['md'] }} overflow-hidden">
        <div class="{{ $colors[$color] ?? $colors['indigo'] }} {{ $sizes[$size] ?? $sizes['md'] }} rounded-full transition-all duration-300"
             style="width: {{ $percent }}%"></div>
    </div>
</div>