@props([
    'icon' => null,
    'label' => null,
    'items' => [],
    'color' => 'primary',
    'size' => null,
    'model' => null,
    'debounce' => false,
    'dropdownStyle' => '',
])

@php

    $bind = '';
    if ($debounce) $bind = '.debounce.' . (ctype_digit($debounce) ? $debounce : 150) . 'ms';

    $wireModel = $attributes->whereStartsWith('wire:model')->first();
    $model =  $model ?? $wireModel;
    $id = $attributes->get('id', $model) ?? uniqid();

    $attributes = $attributes->class([
        'btn btn-' . $color,
        'btn-' . $size => $size,
        'dropdown-toggle',
        'border-0 p-0' => $color == 'link',
    ])->merge([
        'type' => 'button',
        'data-bs-toggle' => 'dropdown',
    ]);
@endphp

<div id="{{ $id }}" class="dropdown d-inline-block" @if($dropdownStyle) style="{{ $dropdownStyle }}" @endif>
    <button {{ $attributes }}>
        <x-ui.nicon :name="$icon" @class(['me-1' => $label])/>

        {{ $label }}
    </button>

    <div class="dropdown-menu">
        @forelse($items ?? [] as $key => $item)
            <x-ui.dropdown-item click="$set('{{ $model }}', '{{ $key }}')" :label="$item"/>
        @empty
        {{ $slot }}
        @endforelse
    </div>
</div>