@props(['groups'])

@foreach ($groups as $group)
    <div>
        <p class="admin-sidebar__group-title px-2.5 pb-1.5 text-[0.6875rem] font-semibold uppercase tracking-[0.08em] text-brand-muted">
            {{ $group['title'] }}
        </p>
        <ul class="space-y-0.5">
            @foreach ($group['items'] as $item)
                <li>
                    <a
                        href="{{ route($item['route']) }}"
                        @if ($item['active']) aria-current="page" @endif
                        class="admin-nav-link"
                    >
                        <x-icon :name="$item['icon']" class="h-4.5 w-4.5 shrink-0" />
                        <span class="admin-sidebar__label flex-1 truncate">{{ $item['label'] }}</span>
                        @if (!empty($item['badge']))
                            <span class="admin-sidebar__badge inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-brand-primary px-1.5 text-[0.6875rem] font-bold text-brand-white">
                                {{ $item['badge'] }}
                            </span>
                        @endif
                    </a>
                </li>
            @endforeach
        </ul>
    </div>
@endforeach
