@props(['active', 'icon'])

@php
// Logika untuk menentukan class CSS jika link sedang aktif atau tidak
$classes = ($active ?? false)
            ? 'flex items-center px-4 py-2.5 text-sm font-bold text-indigo-700 bg-indigo-50 rounded-xl border border-indigo-100 transition-all'
            : 'flex items-center px-4 py-2.5 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-indigo-600 rounded-xl transition-all';

$iconClasses = ($active ?? false)
            ? 'text-indigo-600'
            : 'text-slate-400 group-hover:text-indigo-500';
@endphp

<a {{ $attributes->merge(['class' => $classes]) }}>
    @if($icon)
        <i class="fas {{ $icon }} mr-3 w-5 text-center {{ $iconClasses }}"></i>
    @endif
    
    <span class="truncate">
        {{ $slot }}
    </span>

    @if($active ?? false)
        <span class="ml-auto w-1.5 h-1.5 rounded-full bg-indigo-600"></span>
    @endif
</a>