@props([
    'size' => 'md',
    'variant' => 'primary',
])

@php
    $sizeClasses = match($size) {
        'xs' => 'h-4 w-4 border-2',
        'sm' => 'h-5 w-5 border-2',
        'md' => 'h-8 w-8 border-2',
        'lg' => 'h-12 w-12 border-3',
        'xl' => 'h-16 w-16 border-4',
        default => 'h-8 w-8 border-2',
    };
    
    $colorClasses = match($variant) {
        'primary' => 'border-primary',
        'secondary' => 'border-secondary',
        'white' => 'border-white',
        'neutral' => 'border-base/50',
        default => 'border-primary',
    };
@endphp

<div {{ $attributes->merge(['class' => 'flex items-center justify-center']) }}>
    <div class="animate-spin rounded-full {{ $sizeClasses }} {{ $colorClasses }} border-t-transparent"></div>
</div>