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

@php
    $map = [
        'online'  => 'bg-online/10 text-online',
        'warning' => 'bg-warning/10 text-warning',
        'offline' => 'bg-offline/10 text-offline',
        'neutral' => 'bg-inset text-ink-2',
    ];
    $classes = $map[$state] ?? $map['neutral'];
@endphp

<span {{ $attributes->merge(['class' => 'inline-flex items-center gap-1.5 rounded-full px-2.5 py-[3px] text-[10.5px] font-bold leading-none '.$classes]) }}>
    {{ $slot }}
</span>