<script setup lang="ts">
// types

type Props = {
    modelValue: boolean;
};

type Emits = {
    "update:modelValue": [value: boolean];
};

// props

const props = defineProps<Props>();

const { modelValue } = toRefs(props);

// emit

const emit = defineEmits<Emits>();

// computed

const value = computed({
    get: () => (modelValue.value == "true" ? true : false),
    set: (value) => {
        emit("update:modelValue", value);
    },
});
</script>

<template>
    <SwitchRoot
        v-model="value"
        class="w-[3rem] h-[1.8rem] flex data-[state=unchecked]:bg-slate-200 data-[state=checked]:bg-stone-800 border border-slate-300 data-[state=checked]:border-stone-700 rounded-full relative transition-all focus-within:outline-none"
    >
        <SwitchThumb
            class="size-6 my-auto bg-white text-sm ms-1 flex items-center justify-center shadow-xl rounded-full transition-transform translate-x-0.5 will-change-transform data-[state=checked]:-translate-x-[68%]"
        />
    </SwitchRoot>
</template>

<style scoped></style>
