@props([
  'href' => '#',
  'icon' => null,
  'active' => false,
  'badge' => null,
  'badgeTone' => 'green',
])
@php
  $baseClasses = 'group flex items-center gap-3 px-3 py-2 rounded-cmu text-sm font-medium transition-colors';
  $stateClasses = $active
    ? 'bg-cmu-green-800 text-white shadow-cmu-card'
    : 'text-cmu-ink hover:bg-cmu-green-50 hover:text-cmu-green-800';

  $badgeClasses = match ($badgeTone) {
    'gold'  => 'bg-cmu-gold-100 text-cmu-gold-700',
    'red'   => 'bg-cmu-red-100 text-cmu-red-700',
    default => 'bg-cmu-green-100 text-cmu-green-800',
  };
@endphp
<a href="{{ $href }}"
   @if($active) aria-current="page" @endif
   @if($href && $href !== '#') wire:navigate @endif
   {{ $attributes->merge(['class' => $baseClasses.' '.$stateClasses]) }}>
  @if($icon)
    <span class="inline-flex w-5 h-5 items-center justify-center shrink-0 {{ $active ? 'text-cmu-gold-400' : 'text-cmu-green-700 group-hover:text-cmu-green-800' }}">
      {!! $icon !!}
    </span>
  @endif
  <span class="flex-1 truncate">{{ $slot }}</span>
  @if(! is_null($badge))
    <span class="text-[11px] font-semibold px-2 py-0.5 rounded-full {{ $badgeClasses }}">{{ $badge }}</span>
  @endif
</a>