@props([
    'action' => null,
    'label' => 'Speichern',
    'loadingLabel' => 'Lädt...',
    'variant' => 'primary',
    'type' => 'button',
])

@php
$base = 'relative inline-flex items-center justify-center px-4 py-2 rounded-lg text-sm font-medium transition disabled:opacity-100 disabled:cursor-wait';
$variants = [
    'primary'   => 'bg-accent-gradient text-white hover:opacity-90',
    'secondary' => 'bg-s2 border border-white/[.06] text-t1 hover:bg-s3',
    'danger'    => 'bg-red text-white hover:opacity-90',
    'ghost'     => 'text-t2 hover:text-t1 hover:bg-s2',
];
$cls = $base . ' ' . ($variants[$variant] ?? $variants['primary']);
@endphp

<button
    {{ $attributes->merge(['type' => $type, 'class' => $cls]) }}
    @if($action) wire:loading.attr="disabled" wire:target="{{ $action }}" @endif
>
    <span @if($action) wire:loading.class="opacity-40 blur-sm" wire:target="{{ $action }}" @endif class="flex items-center gap-2 transition-[filter,opacity] duration-150">
        {{ $slot->isNotEmpty() ? $slot : $label }}
    </span>
    @if($action)
        <span wire:loading wire:target="{{ $action }}" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none">
            <svg class="animate-spin w-5 h-5 flex-shrink-0" viewBox="0 0 24 24" fill="none">
                <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2.5" stroke-opacity="0.25"/>
                <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2.5"
                    stroke-dasharray="42.4 56.6" stroke-linecap="round"
                    transform="rotate(-90 12 12)"/>
            </svg>
        </span>
    @endif
</button>