@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-60 disabled:cursor-not-allowed';
$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" wire:target="{{ $action }}" @endif class="flex items-center gap-2">
        {{ $slot->isNotEmpty() ? $slot : $label }}
    </span>
    @if($action)
        <span wire:loading wire:target="{{ $action }}" class="absolute inset-0 flex items-center justify-center">
            <svg class="animate-spin h-4 w-4 flex-shrink-0" viewBox="0 0 24 24" fill="none">
                <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-8v4a4 4 0 00-4 4H4z"/>
            </svg>
        </span>
    @endif
</button>
