@props([
    'users',
    'selectedIds' => [],
    'wireModel' => null,
    'toggleAllMethod' => null,
    'label' => 'Users',
])

<div class="mb-4">
    <label class="block text-sm font-medium mb-2">{{ $label }}</label>
    <div class="space-y-2 max-h-40 overflow-y-auto p-2 bg-gray-700 rounded border border-secondary">
        @if($toggleAllMethod)
            <!-- Select All -->
            <label class="flex items-center cursor-pointer hover:bg-gray-600 p-1 rounded">
                <input type="checkbox"
                       wire:click="{{ $toggleAllMethod }}"
                       {{ count($selectedIds) === count($users) && count($users) > 0 ? 'checked' : '' }}
                       class="mr-2">
                <span class="text-accent-blue font-medium">Select All</span>
            </label>
            <hr class="border-secondary">
        @endif
        <!-- Individual users -->
        @forelse($users as $user)
            <label class="flex items-center cursor-pointer hover:bg-gray-600 p-1 rounded">
                <input type="checkbox"
                       @if($wireModel) wire:model.live="{{ $wireModel }}" @endif
                       value="{{ $user->id }}"
                       class="mr-2">
                <span>{{ $user->name }}</span>
            </label>
        @empty
            <p class="text-gray-400 text-sm italic p-1">No users available.</p>
        @endforelse
    </div>
</div>