{{--
    Spinner Component - TailAdmin style
    
    Usage:
    <x-proxmox::ui.spinner />
    <x-proxmox::ui.spinner size="lg" color="primary" />
--}}

@props([
    'size' => 'md',
    'color' => 'current',
])

@php
    $sizeClasses = [
        'xs' => 'size-3',
        'sm' => 'size-4',
        'md' => 'size-5',
        'lg' => 'size-6',
        'xl' => 'size-8',
    ];
    
    $colorClasses = [
        'current' => 'text-current',
        'primary' => 'text-brand-500',
        'secondary' => 'text-gray-500',
        'success' => 'text-success-500',
        'warning' => 'text-warning-500',
        'danger' => 'text-error-500',
        'info' => 'text-blue-light-500',
        'muted' => 'text-gray-400 dark:text-gray-500',
    ];
    
    $sizeClass = $sizeClasses[$size] ?? $sizeClasses['md'];
    $colorClass = $colorClasses[$color] ?? $colorClasses['current'];
@endphp

<svg 
    {{ $attributes->class(['animate-spin', $sizeClass, $colorClass]) }} 
    xmlns="http://www.w3.org/2000/svg" 
    fill="none" 
    viewBox="0 0 24 24"
>
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>