<template>
    <div>
        <Label class="flex justify-center items-center my-2">{{ label }}
            <SwitchRoot v-model:checked="model" :disabled="disabled" class="ms-3 w-12 h-6 select-none transition-colors border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 dark:hover:border-dark-35 data-[state=checked]:bg-light-35 dark:data-[state=checked]:bg-dark-35">
                <SwitchThumb class="block w-[18px] h-[18px] translate-x-[2px] will-change-transform transition-transform bg-light-50 dark:bg-dark-50 data-[state=checked]:translate-x-[26px]"/>
            </SwitchRoot>
        </Label>
  </div>
</template>

<script setup lang="ts">
const { label, disabled } = defineProps<{
    label?: string
    disabled?: boolean
}>();
const model = defineModel<boolean>();
</script>