@props([
    'variant' => 'primary', // primary|secondary|danger|success|ghost|link|icon
    'type' => 'button',
    'loading' => false,
    'disabled' => false,
    'icon' => null,
])

@php
    $base = 'inline-flex items-center justify-center gap-2 rounded-xl text-sm font-semibold transition duration-300 focus:outline-none focus:ring-4 disabled:cursor-not-allowed disabled:opacity-60';

    $variants = [
        'primary' => 'bg-primary px-4 py-2.5 text-white shadow-lg hover:scale-105 hover:bg-primary/90 focus:ring-primary/20',
        'secondary' => 'border border-slate-300 bg-white px-4 py-2.5 text-slate-700 shadow-sm hover:bg-slate-50 focus:ring-slate-200',
        'danger' => 'bg-red-600 px-4 py-2.5 text-white shadow-lg hover:bg-red-500 focus:ring-red-200',
        'success' => 'bg-emerald-600 px-4 py-2.5 text-white shadow-lg hover:bg-emerald-500 focus:ring-emerald-200',
        'ghost' => 'px-4 py-2.5 text-slate-600 hover:bg-slate-100 focus:ring-slate-200',
        'link' => 'px-0 py-0 text-primary underline decoration-primary/40 underline-offset-2 hover:decoration-primary focus:ring-0',
        'icon' => 'h-10 w-10 p-0 text-slate-500 hover:bg-slate-100 focus:ring-slate-200',
    ];
@endphp

<button type="{{ $type }}" @if ($disabled || $loading) disabled @endif
        {{ $attributes->merge(['class' => $base.' '.($variants[$variant] ?? $variants['primary'])]) }}>
    @if ($loading)
        <i class="fa-solid fa-spinner fa-spin" aria-hidden="true"></i>
    @elseif ($icon)
        <i class="fa-solid {{ $icon }}" aria-hidden="true"></i>
    @endif
    {{ $slot }}
</button>