@props([
    'items' => [],
    'align' => 'end',
    'label' => null,
])

<div {{ $attributes->class('ui-menu') }} data-ui-menu data-ui-menu-align="{{ $align }}">
    <span data-ui-menu-trigger>{{ $trigger }}</span>

    <div
        class="ui-menu-content"
        data-ui-menu-content
        role="menu"
        @if ($label) aria-label="{{ $label }}" @endif
        hidden
    >
        @foreach ($items as $item)
            @if ($item['separatorBefore'] ?? false)
                <div class="ui-menu-separator" role="separator"></div>
            @endif

            @php
                $tag = isset($item['href']) ? 'a' : 'button';
            @endphp

            <{{ $tag }}
                @if ($tag === 'a') href="{{ $item['href'] }}" @else type="button" @endif
                role="menuitem"
                class="ui-menu-item{{ ($item['danger'] ?? false) ? ' ui-menu-item--danger' : '' }}"
                data-ui-menu-item
                data-value="{{ $item['value'] }}"
                data-label="{{ $item['label'] }}"
                @if ($item['disabled'] ?? false)
                    disabled
                    aria-disabled="true"
                @endif
            >
                @if (! empty($item['icon']))
                    <x-ui.icon :name="$item['icon']" :size="16" class="ui-menu-item-icon" />
                @endif
                <span class="ui-menu-item-copy">
                    <span>{{ $item['label'] }}</span>
                    @if (! empty($item['description']))
                        <small>{{ $item['description'] }}</small>
                    @endif
                </span>
            </{{ $tag }}>
        @endforeach
    </div>
</div>