@props([
    'type' => 'button',
    'variant' => 'primary',
    'icon' => null,
    'iconPosition' => 'left',
    'disabled' => false,
    'loading' => false,
    'modalClose' => false,
])

<button
    type="{{ $type }}"
    {{ $attributes->merge([
        'class' => 'fluent-button fluent-button-' . $variant
    ]) }}
    {{ $disabled || $loading ? 'disabled' : '' }}
    {{ $modalClose ? 'data-modal-close' : '' }}
>
    @if($icon && $iconPosition === 'left')
        <x-fluent-icon :name="$icon" />
    @endif

    @if($loading)
        <span class="spinner-border spinner-border-sm"></span>
    @elseif(trim($slot))
        <span>{{ $slot }}</span>
    @endif

    @if($icon && $iconPosition === 'right')
        <x-fluent-icon :name="$icon" />
    @endif
</button>