@props([
'label' => '',
'baseHref' => '',
'items' => [],
'id' => '',
])

<div data-submenu-wrapper="{{ $id }}">
    {{-- Trigger button --}}
    <button
        type="button"
        class="flex items-center gap-3 z-70 p-4"
        data-submenu-trigger="{{ $id }}"
        aria-haspopup="true"
        aria-expanded="false"
        aria-controls="{{ $id }}-panel">
        <span>{{ __($label) }}</span>
        {{-- ChevronDown icon --}}
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="w-4 h-4 transition-transform duration-300 -rotate-90"
            data-submenu-chevron="{{ $id }}"
            aria-hidden="true"
            focusable="false">
            <polyline points="6 9 12 15 18 9"></polyline>
        </svg>
    </button>

    {{-- Dropdown panel --}}
    <div
        id="{{ $id }}-panel"
        class="lg:absolute lg:left-0 lg:right-0 w-full z-40 hidden lg:pt-2"
        data-submenu-panel="{{ $id }}"
        aria-hidden="true">
        <div class="my-2 lg:my-0 w-full bg-black rounded-4xl p-2">
            <ul class="flex h-full flex-col lg:flex-row lg:flex-wrap gap-x-2 gap-y-4 justify-between" role="menu" aria-label="{{ __($label) }}">
                @foreach($items as $item)
                <li class="flex w-full lg:w-[calc(50%-0.5rem)] items-center hover:bg-white/10 rounded-3xl transition-colors duration-200" role="none">
                    <a href="{{ localized_route($item['route']) }}" class="w-full flex flex-row items-center py-2 px-3" role="menuitem">
                        {{-- Thumbnail --}}
                        <div class="w-16 h-16 lg:w-20 lg:h-20 shrink-0 flex items-center justify-center rounded-lg lg:rounded-3xl overflow-hidden bg-gray-800">
                            <img
                                src="{{ $item['image']['src'] }}"
                                alt="{{ __($item['image']['alt']) }}"
                                class="w-full h-full object-cover"
                                loading="lazy"
                                width="80"
                                height="80">
                        </div>
                        {{-- Text --}}
                        <div class="ml-4 flex flex-col">
                            <span class="text-lg lg:text-xl text-white">{{ __($item['label']) }}</span>
                            @if(!empty($item['description']))
                            <p class="text-sm text-gray-400">{{ __($item['description']) }}</p>
                            @endif
                        </div>
                    </a>
                </li>
                @endforeach
            </ul>
        </div>
    </div>
</div>