@props(['label', 'tone' => 'neutral', 'dot' => true])

@php
    $tones = [
        'success' => 'bg-success/10 text-success',
        'danger' => 'bg-error/10 text-error',
        'warning' => 'bg-warning/10 text-warning',
        'neutral' => 'bg-gray-100 text-gray-600',
        'accent' => 'bg-primary/10 text-primary',
    ];
    $dots = [
        'success' => 'bg-success',
        'danger' => 'bg-error',
        'warning' => 'bg-warning',
        'neutral' => 'bg-gray-400',
        'accent' => 'bg-primary',
    ];
@endphp

<span {{ $attributes->merge(['class' => 'inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium '.($tones[$tone] ?? $tones['neutral'])]) }}>
    @if ($dot)
        <span class="h-1.5 w-1.5 rounded-full {{ $dots[$tone] ?? $dots['neutral'] }}"></span>
    @endif
    {{ $label }}
</span>