@props([
    'items' => [],
])

@pushonce('style')
    <style>
        .dropdown-dots-three-divider {
            height: 0;
            margin: var(--bs-dropdown-divider-margin-y) 0;
            overflow: hidden;
            border-top: 1px solid var(--text-primary-light);
            opacity: 1;
        }
    </style>
@endpushonce

<div class="dropdown position-static">
    <button class="btn px-18 py-11 text-primary-light" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        <iconify-icon icon="ph:dots-three-outline-fill" class="menu-icon"></iconify-icon>
    </button>
    <ul class="dropdown-menu" style="">
        @foreach($items as $item)
            @php
                if (!isset($item['show'])) {
                    $item['show'] = true;
                }
            @endphp

            @isset($item['divider'])
                <li class="dropdown-dots-three-divider"></li>
            @endisset

            @if(isset($item['text']) && $item['show'])
                <li>
                    <a class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
                       target="{{ $item['target'] ?? '_self'  }}"
                       href="{{ $item['url'] ?? 'javascript:void(0)' }}" {!! $item['attributes'] ?? '' !!}>
                        <div class="d-flex align-items-center">
                            @isset($item['icon'])
                                <iconify-icon icon="{{ $item['icon'] }}" class="me-2" width="18"
                                              height="18"></iconify-icon>
                            @endisset {{ $item['text'] }}
                        </div>
                    </a>
                </li>
            @endif
        @endforeach
    </ul>
</div>