{{--
    Loading / Async Button (Alpine.js powered)
--}}
@props(['variant' => 'primary', 'type' => 'submit', 'size' => 'md'])

@php
    $base = 'inline-flex cursor-pointer select-none items-center justify-center gap-2 font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background disabled:pointer-events-none disabled:opacity-60';
    $sizeClass = match ($size) {
        'sm' => 'rounded-md px-3 py-1.5 text-xs',
        'lg' => 'rounded-xl px-6 py-3 text-base',
        default => 'rounded-lg px-4 py-2 text-sm',
    };
    $tone = match ($variant) {
        'secondary' => 'border border-border bg-card text-card-foreground shadow-sm hover:bg-muted',
        'danger' => 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
        default => 'bg-brand text-brand-foreground shadow-sm hover:bg-brand/90 active:bg-brand/80',
    };
    $classes = trim("$base $sizeClass $tone");
@endphp

<button
    type="{{ $type }}"
    x-data="{ loading: false }"
    @click="loading = true"
    :disabled="loading"
    {{ $attributes->merge(['class' => $classes]) }}
>
    <svg
        x-show="loading"
        class="h-4 w-4 animate-spin"
        fill="none" viewBox="0 0 24 24"
        aria-hidden="true"
    >
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
    </svg>
    <span x-show="!loading">{{ $slot }}</span>
    <span x-show="loading">Processing…</span>
</button>