@props([
    'wire' => 'export',
    'label' => 'تصدير Excel',
    'loadingText' => 'جاري التصدير...',
    'class' => 'btn btn-sm btn-outline-success',
    'icon' => 'fas fa-file-excel me-1'
])

<button
    {{ $attributes->merge(['class' => "$class d-inline-flex gap-2 align-items-center"]) }}
    wire:click="{{ $wire }}"
    wire:loading.attr="disabled"
>
    <!-- Default State (hidden during loading) -->
    <span wire:loading.remove.delay wire:target="{{ $wire }}">
        <i class="{{ $icon }}"></i>
        {{ $label }}
    </span>
    
    <!-- Loading State (only shown during processing) -->
    <span wire:loading.class.remove="d-none" wire:target="{{ $wire }}" class="d-none">
        <span class="spinner-border spinner-border-sm" role="status"></span>
        {{ $loadingText }}
    </span>
</button>