{{--
    Spinner Component - TailServer Theme
    
    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-6',
        'lg' => 'size-8',
        'xl' => 'size-12',
    ];
    
    $colorClasses = [
        'current' => 'text-current',
        'primary' => 'text-primary',
        'secondary' => 'text-secondary',
        'success' => 'text-success',
        'warning' => 'text-warning',
        'danger' => 'text-danger',
        'info' => 'text-info',
        'muted' => 'text-base/50',
    ];
    
    $sizeClass = $sizeClasses[$size] ?? $sizeClasses['md'];
    $colorClass = $colorClasses[$color] ?? $colorClasses['current'];
@endphp

<svg 
    {{ $attributes->class(['animate-spin drop-shadow-sm', $sizeClass, $colorClass]) }} 
    xmlns="http://www.w3.org/2000/svg" 
    fill="none" 
    viewBox="0 0 24 24"
>
    <circle class="opacity-20" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-80" 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>