@props([
    'variant' => 'primary',   // primary | secondary | danger | success | ghost | link
    'size' => 'md',           // md | sm
    'href' => null,
    'navigate' => true,       // SPA navigation for internal links
    'icon' => null,
    'iconRight' => null,
    'type' => 'button',
    'loading' => null,        // wire:target for the loading spinner
])

@php
    $classes = 'btn btn-'.$variant.($size === 'sm' ? ' btn-sm' : '');
    $iconClass = $size === 'sm' ? 'size-4' : 'size-[18px]';
@endphp

@if ($href)
    <a href="{{ $href }}" @if ($navigate) wire:navigate @endif {{ $attributes->merge(['class' => $classes]) }}>
        @if ($icon)<x-icon :name="$icon" :class="$iconClass" />@endif
        {{ $slot }}
        @if ($iconRight)<x-icon :name="$iconRight" :class="$iconClass" />@endif
    </a>
@else
    <button type="{{ $type }}" {{ $attributes->merge(['class' => $classes]) }}
        @if ($loading) wire:loading.attr="disabled" wire:target="{{ $loading }}" @endif>
        @if ($loading)
            <svg wire:loading wire:target="{{ $loading }}" class="{{ $iconClass }} animate-spin" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <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 12h4z"></path>
            </svg>
            @if ($icon)<span wire:loading.remove wire:target="{{ $loading }}" class="inline-flex"><x-icon :name="$icon" :class="$iconClass" /></span>@endif
        @elseif ($icon)
            <x-icon :name="$icon" :class="$iconClass" />
        @endif
        {{ $slot }}
        @if ($iconRight)<x-icon :name="$iconRight" :class="$iconClass" />@endif
    </button>
@endif