@props(['status' => 'offline', 'ping' => false])
@php
    $c = ['online' => 'bg-online', 'warning' => 'bg-warning', 'offline' => 'bg-offline', 'pending' => 'bg-cyan'][$status] ?? 'bg-ink-4';
    $glow = ['online' => 'shadow-[0_0_6px_var(--color-online)]', 'warning' => 'shadow-[0_0_5px_var(--color-warning)]', 'pending' => 'shadow-[0_0_5px_var(--color-cyan)]'][$status] ?? '';
@endphp
<span {{ $attributes->merge(['class' => 'relative inline-flex h-2 w-2 shrink-0']) }}>
    @if ($ping)
        <span class="absolute inline-flex h-full w-full rounded-full {{ $c }} opacity-60 motion-safe:animate-ping"></span>
    @endif
    <span class="relative inline-flex h-2 w-2 rounded-full {{ $c }} {{ $glow }}"></span>
</span>