@props([
    'variant' => 'primary',
    'size' => 'md',
    'type' => 'button',
    'href' => null,
    'icon' => null,
    'iconRight' => null,
    'loading' => false,
    'block' => false,
    'disabled' => false,
])

@php
    $variantClass = match($variant) {
        'primary'   => 'btn-primary',
        'secondary' => 'btn-secondary',
        'success'   => 'btn-success',
        'danger'    => 'btn-danger',
        'warning'   => 'btn-warning',
        'info'      => 'btn-info',
        'light'     => 'btn-light',
        'dark'      => 'btn-dark',
        'ghost'     => 'btn-ghost',
        'link'      => 'btn-link',
        'outline'   => 'btn-outline-primary',
        default     => 'btn-primary',
    };
    $sizeClass = match($size) {
        'xs' => 'btn-xs',
        'sm' => 'btn-sm',
        'md' => '',
        'lg' => 'btn-lg',
        default => '',
    };
    $classes = trim("btn {$variantClass} {$sizeClass}" . ($block ? ' w-100' : '') . ($loading ? ' is-loading' : ''));
@endphp

@if ($href)
    <a href="{{ $href }}" {{ $attributes->merge(['class' => $classes]) }} @if($disabled) aria-disabled="true" tabindex="-1" @endif>
        @if($loading)<span class="btn__spinner" aria-hidden="true"></span>@endif
        @if($icon)<span class="btn__icon">{!! icon($icon) !!}</span>@endif
        <span class="btn__label">{{ $slot }}</span>
        @if($iconRight)<span class="btn__icon btn__icon--right">{!! icon($iconRight) !!}</span>@endif
    </a>
@else
    <button type="{{ $type }}" {{ $attributes->merge(['class' => $classes]) }} @disabled($disabled || $loading)>
        @if($loading)<span class="btn__spinner" aria-hidden="true"></span>@endif
        @if($icon)<span class="btn__icon">{!! icon($icon) !!}</span>@endif
        <span class="btn__label">{{ $slot }}</span>
        @if($iconRight)<span class="btn__icon btn__icon--right">{!! icon($iconRight) !!}</span>@endif
    </button>
@endif