@props(['tone' => 'gray', 'dot' => false])

@php
$classes = match ($tone) {
    'brand' => 'bg-brand-50 text-brand-700 ring-brand-200',
    'emerald' => 'bg-emerald-50 text-emerald-700 ring-emerald-200',
    'amber' => 'bg-amber-50 text-amber-700 ring-amber-200',
    'red' => 'bg-red-50 text-red-700 ring-red-200',
    'sky' => 'bg-sky-50 text-sky-700 ring-sky-200',
    'violet' => 'bg-accent-50 text-accent-700 ring-accent-200',
    'slate' => 'bg-slate-100 text-slate-700 ring-slate-200',
    default => 'bg-gray-100 text-gray-600 ring-gray-200',
};

$dotClasses = match ($tone) {
    'brand' => 'bg-brand-500',
    'emerald' => 'bg-emerald-500',
    'amber' => 'bg-amber-500',
    'red' => 'bg-red-500',
    'sky' => 'bg-sky-500',
    'violet' => 'bg-accent-500',
    'slate' => 'bg-slate-500',
    default => 'bg-gray-400',
};
@endphp

<span {{ $attributes->merge(['class' => 'inline-flex items-center gap-1.5 whitespace-nowrap rounded-full px-2.5 py-0.5 text-xs font-medium ring-1 '.$classes]) }}>
    @if ($dot)
        <span class="h-1.5 w-1.5 rounded-full {{ $dotClasses }}"></span>
    @endif

    {{ $slot }}
</span>