@props([
    'label' => null,
    'icon' => null,
    'align' => 'end',
    'variant' => 'ghost',
    'size' => 'md',
    'caret' => true,
    'menuClass' => '',
])

@php
    $variantClass = match($variant) {
        'primary' => 'btn-primary',
        'secondary' => 'btn-secondary',
        'outline' => 'btn-outline-secondary',
        'ghost' => 'btn-ghost',
        default => 'btn-ghost',
    };
    $sizeClass = match($size) {
        'sm' => 'btn-sm',
        'lg' => 'btn-lg',
        default => '',
    };
    $alignClass = 'dropdown-menu-' . $align;
@endphp

<div {{ $attributes->merge(['class' => 'dropdown']) }}>
    <button
        type="button"
        class="btn {{ $variantClass }} {{ $sizeClass }} dropdown-toggle {{ $caret ? '' : 'dropdown-toggle--no-caret' }}"
        data-bs-toggle="dropdown"
        aria-expanded="false"
    >
        @if($icon)<span class="me-1">{!! icon($icon) !!}</span>@endif
        @if($label)<span>{{ $label }}</span>@endif
    </button>
    <ul class="dropdown-menu {{ $alignClass }} {{ $menuClass }}">
        {{ $slot }}
    </ul>
</div>