@props([
    'href' => null,
    'tone' => 'slate',
    'type' => 'button',
])

@php
    $tones = [
        'slate' => 'border-slate-300 bg-white text-slate-700 hover:bg-slate-50',
        'sky' => 'border-sky-200 bg-sky-50 text-sky-700 hover:bg-sky-100',
        'emerald' => 'border-emerald-200 bg-emerald-50 text-emerald-700 hover:bg-emerald-100',
        'rose' => 'border-rose-200 bg-rose-50 text-rose-700 hover:bg-rose-100',
    ];

    $classes = 'inline-flex min-h-8 items-center justify-center whitespace-nowrap rounded-lg border px-3 py-1.5 text-xs font-semibold shadow-sm transition focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2';
@endphp

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