@props([
    'variant' => 'secondary',
    'size' => 'md',
    'href' => null,
    'icon' => null,
    'loading' => null,
])

@php
    $classes = implode(' ', array_filter([
        'btn',
        'btn-'.$variant,
        $size === 'sm' ? 'btn-sm' : ($size === 'lg' ? 'btn-lg' : null),
    ]));
@endphp

@if ($href)
    <a href="{{ $href }}" wire:navigate {{ $attributes->merge(['class' => $classes]) }}>
        @if ($icon) <x-ui.icon :name="$icon" class="h-4 w-4" /> @endif
        {{ $slot }}
    </a>
@else
    <button
        type="{{ $attributes->get('type', 'button') }}"
        @if ($loading) wire:loading.attr="disabled" wire:target="{{ $loading }}" @endif
        {{ $attributes->except('type')->merge(['class' => $classes]) }}
    >
        @if ($icon)
            <x-ui.icon :name="$icon" class="h-4 w-4" @if ($loading) wire:loading.remove wire:target="{{ $loading }}" @endif />
        @endif

        @if ($loading)
            <svg wire:loading wire:target="{{ $loading }}" class="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
                <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3" class="opacity-25" />
                <path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
            </svg>
        @endif

        {{ $slot }}
    </button>
@endif