@props(['label', 'items', 'title'])

<span class="shrink-0 px-0.5 text-neutral-300 dark:text-fg-faint">/</span>
<div class="relative min-w-0 shrink" x-data="{ open: false }" @keydown.escape.window="open = false">
    <div class="flex h-8 min-w-0 items-center gap-1">
        <button type="button" @click="open = !open" @click.outside="open = false" title="Switch resource"
            class="flex h-8 min-w-0 items-center gap-1.5 rounded-md px-2 opacity-70 transition-[background-color,opacity] hover:bg-neutral-100 hover:opacity-100 dark:hover:bg-white/[0.05]">
            <span class="min-w-0 truncate font-semibold text-black dark:text-fg">{{ $label }}</span>
            <svg class="size-4 shrink-0 text-neutral-400 dark:text-fg-faint" viewBox="0 0 24 24" fill="none">
                <path d="M8 9l4-4 4 4M8 15l4 4 4-4" stroke="currentColor" stroke-width="1.6"
                    stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </button>
        @isset($meta)
            {{ $meta }}
        @endisset
    </div>

    <div x-show="open" x-cloak x-transition.opacity.duration.120ms
        class="listbox-panel scrollbar left-0! z-[90]! max-h-80! min-w-56 max-w-72">
        <div class="px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-neutral-400 dark:text-fg-faint">
            {{ $title }}
        </div>
        @foreach ($items as $item)
            <a href="{{ $item['href'] }}" {{ wireNavigate() }} @click="open = false"
                class="listbox-option {{ $item['active'] ? 'bg-neutral-100 font-medium text-black dark:bg-white/[0.07] dark:text-fg' : '' }}">
                <span class="min-w-0 flex-1 truncate">{{ $item['label'] }}</span>
            </a>
        @endforeach
    </div>
</div>
