@props(['href' => null, 'variant' => 'primary', 'type' => 'button'])
@php
$styles = [
  'primary' => 'bg-brand-600 hover:bg-brand-700 text-white shadow-sm',
  'secondary' => 'bg-white hover:bg-slate-50 text-slate-700 ring-1 ring-slate-200 shadow-sm',
  'danger' => 'bg-rose-600 hover:bg-rose-700 text-white shadow-sm',
  'ghost' => 'hover:bg-slate-100 text-slate-600',
][$variant] ?? '';
$cls = "inline-flex items-center justify-center gap-1.5 rounded-full px-4 py-2.5 text-sm font-semibold transition active:scale-[.97] $styles";
@endphp
@if($href)
<a href="{{ $href }}" {{ $attributes->merge(['class' => $cls]) }}>{{ $slot }}</a>
@else
<button type="{{ $type }}" {{ $attributes->merge(['class' => $cls]) }}>{{ $slot }}</button>
@endif