@props([
    'name',
    'label' => 'Toggle',
    'initialState' => false,
])

<div x-data="{
        // Estado interno del switch
        isOn: @json($initialState),

        // Función para cambiar el estado y notificar
        toggle() {
            this.isOn = !this.isOn;
            // Emite un evento personalizado con el nombre y el nuevo estado
            this.$dispatch('toggled-{{ $name }}', { state: this.isOn, name: '{{ $name }}' });
        }
    }"
    {{-- Fusiona clases adicionales pasadas al componente con las clases predeterminadas --}}
    {{ $attributes->merge(['class' => 'flex items-center space-x-2']) }}
>
    <label for="{{ $name }}" class="text-size-small-heading font-medium text-gray-700 cursor-pointer">
        {{ $label }}
    </label>

    <button type="button"
        id="{{ $name }}"
        @click="toggle()"
        :aria-checked="isOn"
        :class="isOn ? 'bg-primary' : 'bg-gray-200'"
        class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
        role="switch"
    >
        <span class="sr-only">{{ $label }}</span>
        <span aria-hidden="true"
            :class="isOn ? 'translate-x-5' : 'translate-x-0'"
            class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
        ></span>
    </button>

    <input type="hidden" name="{{ $name }}" :value="isOn ? 1 : 0">
</div>