@props([
    'id' => 'toggle' . uniqid(),
    'label' => null,
    'disabled' => false,
    'checked' => 0,
])
<div wire:ignore>
    <div x-data="{ state: {{ $checked }} }" class="flex items-center gap-3" x-init="
    
    $watch('$wire.{{ $attributes->wire('model')->value() }}', value => {
            state = value
        });
    ">
        <label for="{{ $id }}"
            class="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-700 dark:text-gray-400 select-none">

            <div class="relative">
                <input type="checkbox" id="{{ $id }}" {{ $disabled ? 'disabled' : '' }}
                    {!! $attributes->merge([
                        'class' => 'sr-only',
                    ]) !!} />

                <div class="block h-6 w-11 rounded-full transition-colors duration-300"
                    :class="state ? 'bg-brand-500 dark:bg-brand-500' : 'bg-gray-200 dark:bg-white/10'"></div>

                <div class="shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear"
                    :class="state ? 'translate-x-full' : 'translate-x-0'"></div>
            </div>

            @if ($label)
                <span>{{ $label }}</span>
            @endif

        </label>
    </div>
    <p class="text-theme-xs mt-1 text-error-500">{{ $errors->first($attributes->get('wire:model')) }}</p>
</div>