@props([
    'href' => '#',
    'icon' => null,
    'active' => false,
    'badge' => null,
])

@php
    $cls = 'flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm cursor-pointer transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-bg-tint ';
    $cls .= $active
        ? 'bg-ink-1 text-bg-base font-semibold shadow-sm'
        : 'text-ink-2 hover:bg-bg-soft hover:text-ink-1';
@endphp

<a
    href="{{ $href }}"
    @if($active) aria-current="page" @endif
    {{ $attributes->merge(['class' => $cls]) }}
>
    @if($icon)
        <x-dynamic-component :component="'heroicon-o-' . $icon" class="w-4 h-4 shrink-0" />
    @endif
    <span class="flex-1 truncate">{{ $slot }}</span>
    @if($badge)
        <span class="bg-primary text-white text-[10px] px-1.5 py-0.5 rounded-full font-bold tabular-nums">{{ $badge }}</span>
    @endif
</a>