@props(['status' => 'offline'])
@php
    $c = [
        'online'  => 'text-online border-online/20 bg-online/10',
        'warning' => 'text-warning border-warning/20 bg-warning/10',
        'offline' => 'text-offline border-offline/20 bg-offline/10',
        'pending' => 'text-cyan border-cyan/20 bg-cyan/10',
    ][$status] ?? 'text-ink-3 border-line bg-line';
@endphp
<span {{ $attributes->merge(['class' => "inline-flex items-center gap-1.5 rounded-sm border px-2 py-0.5 font-mono text-xs $c"]) }}>
    <x-status-dot :status="$status" :ping="in_array($status, ['online', 'pending'], true)" />
    {{ $slot }}
</span>