@props(['tone' => 'neutral'])

@php
$classes = [
    'good' => 'bg-emerald-50 text-emerald-700',
    'warn' => 'bg-amber-50 text-amber-700',
    'bad' => 'bg-red-50 text-red-700',
    'neutral' => 'bg-stone-100 text-stone-600',
][$tone] ?? 'bg-stone-100 text-stone-600';
@endphp

<span {{ $attributes->merge(['class' => "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium $classes"]) }}>
    {{ $slot }}
</span>