@props([
    'variant' => 'neutral',   // success | warning | danger | info | neutral
    'dot' => false,
    'pulse' => false,         // animated ring for genuinely live state
])

@php
    /*
     | `variant` lines up with the string returned by every status enum's
     | badge() method, so a status renders correctly by passing the enum
     | straight through: <x-ui.badge :variant="$server->status->badge()">
     */
    $variants = [
        'success' => 'bg-success/10 text-success border-success/25',
        'warning' => 'bg-warning/10 text-warning border-warning/25',
        'danger'  => 'bg-danger/10 text-danger border-danger/25',
        'info'    => 'bg-info/10 text-info border-info/25',
        'neutral' => 'bg-silver-500/10 text-silver-300 border-silver-500/25',
    ];
@endphp

<span {{ $attributes->merge([
    'class' => 'inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 '
        .'text-xs font-medium whitespace-nowrap '
        .($variants[$variant] ?? $variants['neutral']),
]) }}>
    @if ($dot)
        <span class="relative flex h-1.5 w-1.5">
            @if ($pulse)
                <span class="zylo-pulse absolute inline-flex h-full w-full rounded-full"></span>
            @endif
            <span class="relative inline-flex h-1.5 w-1.5 rounded-full bg-current"></span>
        </span>
    @endif

    {{ $slot }}
</span>