@props([
    'type' => 'submit',
    'style' => 'primary',   // Bootstrap style: primary, secondary, etc.
    'size' => null,         // sm, lg
    'block' => false,       // full-width button
    'outline' => false,     // outline style
    'icon' => null,         // optional icon class
    'loading' => false,     // show a spinner
    'disabled' => false,    // disable button
    'href' => null,         // turn into link
    'confirm' => null,      // JS confirm text
])

@php
    $btnClass = 'btn';
    $btnClass .= $outline ? " btn-outline-$style" : " btn-$style";
    $btnClass .= $size ? " btn-$size" : '';
    $btnClass .= $block ? ' w-100' : '';
@endphp

@if ($href)
    <a href="{{ $href }}"
            {{ $attributes->merge([
                'class' => $btnClass,
                'onclick' => $confirm ? "return confirm('$confirm')" : null
            ]) }}>

        <div wire:loading>
            <span class="spinner-border spinner-border-sm me-2"></span>
        </div>

        @if($icon)
            <i class="{{ $icon }} me-2"></i>
        @endif

        {{ $slot }}
    </a>
@else
    <button type="{{ $type }}"
            {{ $attributes->merge([
                'class' => $btnClass,
                'disabled' => $disabled || $loading,
                'onclick' => $confirm ? "return confirm('$confirm')" : null
            ]) }}>


        <div wire:loading>
            <span class="spinner-border spinner-border-sm me-2"></span>
        </div>

        @if($icon)
            <i class="{{ $icon }} me-2"></i>
        @endif

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