@props(['active' => false])

@php
    $classes = $active
        ? 'bg-brand-blue text-white shadow-lg shadow-blue-600/20'
        : 'text-slate-600 hover:bg-slate-100 hover:text-brand-navy dark:text-slate-300 dark:hover:bg-white/10 dark:hover:text-white';
@endphp

<a {{ $attributes->merge(['class' => 'flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-semibold transition '.$classes]) }}>
    {{ $slot }}
</a>