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

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

@php
    $sizeStyles = [
        'xs' => 'width: 0.75rem; height: 0.75rem;',
        'sm' => 'width: 1rem; height: 1rem;',
        'md' => 'width: 1.25rem; height: 1.25rem;',
        'lg' => 'width: 1.5rem; height: 1.5rem;',
        'xl' => 'width: 2rem; height: 2rem;',
    ];
    
    $colorStyles = [
        'current' => 'color: currentColor;',
        'primary' => 'color: var(--lte-primary, #0d6efd);',
        'secondary' => 'color: var(--lte-secondary, #6c757d);',
        'success' => 'color: var(--lte-success, #198754);',
        'warning' => 'color: var(--lte-warning, #ffc107);',
        'danger' => 'color: var(--lte-danger, #dc3545);',
        'info' => 'color: var(--lte-info, #0dcaf0);',
        'muted' => 'color: #adb5bd;',
    ];
    
    $sizeStyle = $sizeStyles[$size] ?? $sizeStyles['md'];
    $colorStyle = $colorStyles[$color] ?? $colorStyles['current'];
@endphp

<style>
    .spinner-lte {
        animation: spin-lte 1s linear infinite;
    }
    @keyframes spin-lte {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
</style>

<svg 
    {{ $attributes }}
    class="spinner-lte"
    style="{{ $sizeStyle }} {{ $colorStyle }}"
    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>