@props([
    'label' => '',
    'name' => '',
    'options' => [],
    'selected' => [],
])

@php $selected = (array) $selected; @endphp

<div class="mb-3">
    @if($label)
        <label class="form-label d-flex justify-content-between align-items-center mb-1">
            <span>{{ $label }}</span>
            @if(count($selected))
                <span class="badge bg-primary rounded-pill">{{ count($selected) }}</span>
            @endif
        </label>
    @endif

    <div class="border rounded p-2 bg-white" style="max-height: 160px; overflow-y: auto;">
        @forelse($options as $value => $option)
            <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       wire:model.live="{{ $name }}"
                       value="{{ $value }}"
                       id="cl_{{ $name }}_{{ $value }}">
                <label class="form-check-label small" for="cl_{{ $name }}_{{ $value }}">
                    {{ $option }}
                </label>
            </div>
        @empty
            <div class="text-muted small">No options available.</div>
        @endforelse
    </div>
</div>