@props([
    'variant' => 'secondary', // primary | secondary | danger
    'type' => 'button',
    'icon' => null,
])

@php
$classes = match ($variant) {
    'primary' => 'bg-content text-surface hover:opacity-90',
    'danger' => 'bg-danger-fill text-danger-text border border-danger-border hover:opacity-90',
    default => 'border border-border-strong text-content hover:bg-subtle',
};
@endphp

<button {{ $attributes->merge([
    'type' => $type,
    'class' => "h-9 px-4 inline-flex items-center justify-center gap-2 rounded-md text-base font-medium transition active:scale-[0.98] {$classes}",
]) }}>
    @if ($icon)
        <span aria-hidden="true" class="text-small">{{ $icon }}</span>
    @endif
    {{ $slot }}
</button>