{{--
    Read /App/Livewire/Concerns/Choices/README.md first.
    This will give you a resuable idea of using this component
--}}
@props([
    'label' => 'Select Items',
    'options',          // The data collection passed from the parent
    'searchFunction',   // The parent method to call for searching
    'selectAllAction',  // The parent method to call for selecting all
    'clearAction',      // The parent method to call for clearing
    'placeholder' => 'Search...',
    'noResultText' => 'No items found.'
])

<fieldset class="fieldset">
    <legend class="fieldset-legend w-full mb-1 flex items-end justify-between">
        <label class="text-xs font-semibold text-">{{ $label }}</label>

        <div class="flex gap-3 text-xs">
            <button type="button" wire:click="{{ $selectAllAction }}" class="text-primary hover:underline">
                Select All
            </button>
            <button type="button" wire:click="{{ $clearAction }}" class="text-error hover:underline">
                Clear
            </button>
        </div>
    </legend>

    <x-mary-choices
        {{ $attributes->whereStartsWith('wire:model') }}
        :options="$options"
        search-function="{{ $searchFunction }}"
        option-label="name"
        option-value="id"
        :no-result-text="$noResultText"
        :placeholder="$placeholder"
        searchable
    />
</fieldset>