@props([
    'variant' => 'primary',
    'size' => 'md',
    'type' => 'button',
    'disabled' => false,
])

@php
    $variantClasses = match($variant) {
        'primary' => 'bg-liv-500 hover:bg-liv-600 focus:ring-liv-500 text-white shadow-xs',
        'navy' => 'bg-navy-900 hover:bg-navy-950 focus:ring-navy-900 text-white shadow-xs',
        'secondary' => 'bg-white hover:bg-slate-50 text-slate-700 border border-slate-300 focus:ring-slate-400 shadow-2xs',
        'danger' => 'bg-rose-600 hover:bg-rose-700 focus:ring-rose-500 text-white shadow-xs',
        'success' => 'bg-emerald-600 hover:bg-emerald-700 focus:ring-emerald-500 text-white shadow-xs',
        'ghost' => 'bg-transparent hover:bg-slate-100 text-slate-600 focus:ring-slate-400',
        default => 'bg-liv-500 hover:bg-liv-600 text-white',
    };

    $sizeClasses = match($size) {
        'sm' => 'px-2.5 py-1.5 text-xs',
        'lg' => 'px-5 py-2.5 text-base',
        default => 'px-4 py-2 text-sm',
    };
@endphp

<button type="{{ $type }}"
        {{ $disabled ? 'disabled' : '' }}
        {{ $attributes->merge(['class' => "inline-flex items-center justify-center gap-2 font-medium rounded-lg transition focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer {$variantClasses} {$sizeClasses}"]) }}>
    {{ $slot }}
</button>