{{-- Destructive Button --}}
@props(['type' => 'button', 'size' => 'md', 'href' => null, 'loading' => false])

@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-destructive 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 = 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 active:bg-destructive/80';
    $classes = trim("$base $sizeClass $tone");
@endphp

@if($href)
    <a href="{{ $href }}" {{ $attributes->merge(['class' => $classes]) }}>{{ $slot }}</a>
@else
    <button type="{{ $type }}" {{ $loading ? 'disabled' : '' }} {{ $attributes->merge(['class' => $classes]) }}>
        @if($loading)
            <svg 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>
        @endif
        {{ $slot }}
    </button>
@endif