@props([
    'href',
    'active' => false,
    'accent' => null,
    'badge' => null,
    'pulse' => false,
])
@php
    $accent = in_array($accent, ['emergency', 'vip'], true) ? $accent : null;
@endphp
<a
    href="{{ $href }}"
    {{ $attributes->class([
        'group flex w-full min-w-0 items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition-all duration-200',
        'border-l-[3px] border-red-500 bg-red-950/35 text-red-50 hover:bg-red-950/55' => $accent === 'emergency',
        'border-l-[3px] border-amber-400 bg-violet-950/25 text-violet-100 hover:bg-violet-950/45' => $accent === 'vip',
        'bg-gradient-to-r from-teal-500/25 to-cyan-500/10 text-white shadow-[inset_0_0_0_1px_rgba(255,255,255,0.12)]' => $active && $accent === null,
        'text-slate-400 hover:bg-white/[0.06] hover:text-white' => ! $active && $accent === null,
        'ring-1 ring-inset ring-white/15' => $active && $accent !== null,
        'text-white' => $active && $accent !== null,
    ]) }}
>
    <span @class([
        'h-1.5 w-1.5 shrink-0 rounded-full transition-colors',
        'animate-pulse bg-red-400 shadow-[0_0_10px_rgba(248,113,113,0.9)]' => $pulse,
        'bg-teal-400 shadow-[0_0_8px_rgba(45,212,191,0.65)]' => $active && ! $pulse && $accent === null,
        'bg-red-300' => $accent === 'emergency' && ! $pulse,
        'bg-amber-300' => $accent === 'vip',
        'bg-slate-600 group-hover:bg-slate-400' => ! $active && $accent === null && ! $pulse,
    ])></span>
    <span class="min-w-0 flex-1 truncate">{{ $slot }}</span>
    @if($badge !== null && $badge !== '')
        <span class="shrink-0 rounded-full bg-white/10 px-2 py-0.5 text-[10px] font-bold tabular-nums text-white/90">{{ $badge }}</span>
    @endif
</a>