{{-- components/mark-item.blade.php --}}
@props(['route','icon','title','subtitle'])

@php
$active = request()->routeIs($route.'*');
$linkBase = 'nav-link flex items-center gap-3 px-4 py-2.5 text-sm rounded-lg transition-colors';
@endphp

<a href="{{ route($route) }}"
   class="{{ $linkBase }} {{ $active ? 'bg-white/20 text-white shadow-sm' : 'text-white/70 hover:text-white hover:bg-white/10' }}">
    <div class="h-8 w-8 rounded-xl grid place-items-center bg-gradient-to-br from-violet-500 via-purple-500 to-fuchsia-500 text-white shadow-sm">
        <i class="fa-solid {{ $icon }} text-xs"></i>
    </div>
    <div class="flex flex-col gap-0.5">
        <span class="text-sm font-semibold">{{ $title }}</span>
        <span class="text-[10px] text-white/60">{{ $subtitle }}</span>
    </div>
</a>