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

<a href="{{ $href }}"
   class="group flex items-center gap-3 px-4 py-2 rounded-lg
          transition-all duration-200 relative
          {{ $active 
                ? 'bg-gradient-to-r from-red-600 to-red-700 text-white shadow-md'
                : 'hover:bg-gray-800 hover:text-white text-gray-400' }}">

    <!-- ICON -->
    <i class="{{ $icon }} w-5 text-center"></i>

    <!-- TEXT -->
    <span 
        x-show="!collapsed"
        x-transition.opacity
        class="whitespace-nowrap">
        {{ $slot }}
    </span>

    <!-- TOOLTIP (When Collapsed) -->
    <span 
        x-show="collapsed"
        class="absolute left-16 bg-black text-white text-xs
               px-2 py-1 rounded-md opacity-0
               group-hover:opacity-100 transition pointer-events-none whitespace-nowrap">
        {{ $slot }}
    </span>
</a>