@props([
    'options' => [],
    'selected' => [],
    'name' => 'multiselect',
    'id' => 'multiselect-' . Str::random(5),
    'wireModel' => null // Nuevo prop para el modelo Livewire
])

<div 
    x-data="{ 
        open: false, 
        selected: @if($wireModel) @entangle($wireModel) @else {{ json_encode($selected) }} @endif 
    }" 
    class="relative"
    <div 
        @click="open = !open" 
        class="cursor-pointer p-2 border rounded-lg flex items-center justify-between"
    >
        <span x-text="selected.length ? selected.join(', ') : 'Seleccione opciones'"></span>
        <x-icons icon="chevron-down" class="w-4 h-4 ml-2" />
    </div>
    
    <div 
        x-show="open" 
        @click.away="open = false" 
        class="absolute z-50 w-full mt-1 bg-white border rounded-lg shadow-lg max-h-60 overflow-auto"
    >
        <template x-for="(option, index) in {{ json_encode($options) }}">
            <label class="flex items-center px-4 py-2 hover:bg-gray-100">
                <input 
                    type="checkbox" 
                    x-model="selected" 
                    :value="option.value" 
                    class="rounded border-gray-300 text-blue-600 shadow-sm focus:ring-blue-500"
                >
                <span x-text="option.label" class="ml-2"></span>
            </label>
        </template>
    </div>
</div>