@props(['name', 'checked' => false])

<label class="inline-flex items-center cursor-pointer">
    <input type="checkbox"
           name="{{ $name }}"
           id="{{ $name }}"
           {{ $checked ? 'checked' : '' }}
           class="sr-only peer">
    <div class="w-11 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-[color:var(--primary-color)] dark:bg-gray-700 rounded-full peer dark:peer-focus:ring-[color:var(--primary-color)] peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-[color:var(--primary-color)] relative"></div>
</label>