@props(['href' => null, 'variant' => 'default'])

@php
$classes = 'inline-flex items-center justify-center rounded-lg bg-white px-3 py-1.5 text-xs font-semibold shadow-sm ring-1 ring-inset focus:outline-none focus:ring-2 transition duration-150 ease-in-out '.match ($variant) {
    'danger' => 'text-red-700 ring-red-200 hover:bg-red-50 focus:ring-red-500',
    'success' => 'text-emerald-700 ring-emerald-200 hover:bg-emerald-50 focus:ring-emerald-500',
    'warning' => 'text-amber-700 ring-amber-200 hover:bg-amber-50 focus:ring-amber-500',
    default => 'text-slate-700 ring-slate-300 hover:bg-slate-50 focus:ring-brand-500',
};
@endphp

@if ($href)
    <a href="{{ $href }}" {{ $attributes->merge(['class' => $classes]) }}>
        {{ $slot }}
    </a>
@else
    <button {{ $attributes->merge(['type' => 'submit', 'class' => $classes]) }}>
        {{ $slot }}
    </button>
@endif