@props([
    'type' => 'button',
    'color' => 'primary',
    'soft' => false,
    'outline' => false,
    'size' => null,
    'icon' => null,
    'iconPosition' => 'left',
    'loading' => false,
    'disabled' => false
])

@php
$class = 'btn';

if ($outline) {
    $class .= ' btn-outline-' . $color;
} elseif ($soft) {
    $class .= ' btn-soft-' . $color;
} else {
    $class .= ' btn-' . $color;
}

if ($size) {
    $class .= ' btn-' . $size;
}

if ($loading) {
    $class .= ' disabled';
}
@endphp

<button
    type="{{ $type }}"
    {{ $attributes->merge(['class' => $class]) }}
    @if($disabled || $loading) disabled @endif
>
    @if($loading)
        <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
        Loading...
    @else
        @if($icon && $iconPosition === 'left')
            <i class="{{ $icon }} align-middle me-1"></i>
        @endif

        {{ $slot }}

        @if($icon && $iconPosition === 'right')
            <i class="{{ $icon }} align-middle ms-1"></i>
        @endif
    @endif
</button>