@props(['icon', 'route', 'text'])

@php
    $active = request()->routeIs($route);
@endphp

<a href="{{ route($route) }}"
   class="
        flex items-center space-x-2 px-3 py-2 rounded-md text-sm
        transition-all duration-150
        {{ $active
            ? 'bg-blue-100 text-blue-700 font-medium'
            : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'
        }}
    "
>
    <x-dynamic-component :component="'icon.' . $icon" class="w-4 h-4" />
    <span>{{ $text }}</span>
</a>