@props([
    'menuSlug' => 'main-header', // Default slug
])

@php
    use Koneko\VuexyWebsiteAdmin\Website\Menu\WebsiteMenuRenderer;

    $items = WebsiteMenuRenderer::tree($menuSlug);
@endphp

<ul class="nav nav-pills w-100" id="mainNav">
    @foreach ($items as $item)
        @php
            $aClass   = 'dropdown-item' . (!empty($item['children']) ? ' dropdown-toggle' : '');
            $aria     = !empty($item['children']) ? 'data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"' : '';
            $iconDown = !empty($item['children']) ? '<i class="fas fa-chevron-down"></i>' : '';
        @endphp
        <li class="nav-item {{ !empty($item['children']) ? 'dropdown' : '' }}">
            <a href="{{ $item['url'] ?? 'javascript:;' }}" class="{{ $aClass }}" {{ $aria }}>
                {{ $item['title'] }} {{ $iconDown }}
            </a>
            @if (!empty($item['children']))
                <ul class="dropdown-menu">
                    @foreach ($item['children'] as $child)
                        @include('porto::components.header.menu-item', ['item' => $child])
                    @endforeach
                </ul>
            @endif
        </li>
    @endforeach
</ul>