@props([
    // Heroicon name shown before the label.
    'icon' => null,
    // 'default' | 'primary' (the suggested next step) | 'danger'.
    'tone' => 'default',
    // Renders an <a> instead of a <button> when set.
    'href' => null,
])

@php
    $tones = [
        'primary' => 'bg-indigo-500 text-white hover:bg-indigo-400',
        'danger' => 'text-rose-300 hover:bg-rose-500/15 hover:text-rose-200',
        'default' => 'text-slate-200 hover:bg-white/10 hover:text-white',
    ];

    $classes = 'inline-flex h-9 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-xl px-3 text-sm font-medium transition disabled:opacity-50 '
        . ($tones[$tone] ?? $tones['default']);
@endphp

@if ($href)
    <a href="{{ $href }}" {{ $attributes->merge(['class' => $classes]) }}>
        @if ($icon)
            <x-icon :name="$icon" class="h-4 w-4" />
        @endif
        {{ $slot }}
    </a>
@else
    <button type="button" {{ $attributes->merge(['class' => $classes]) }}>
        @if ($icon)
            <x-icon :name="$icon" class="h-4 w-4" />
        @endif
        {{ $slot }}
    </button>
@endif