<template>
    <div class="flex items-center space-x-6">
        <label :for="id" class="block relative flex items-center">
            <input :id="id" type="checkbox" :name="name" :checked="inner === true" class="peer absolute invisible" @change="inner = !inner" />
            <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block"></span>
            <span class="peer-checked:bg-primary left-[6px] w-3 h-3 absolute rounded-sm block"></span>
            <span class="pl-8" v-html="label"></span>
        </label>
    </div>
</template>

<script setup>
import {computed} from 'vue';

const emit = defineEmits(['update:modelValue']);
const props = defineProps({
    name: {
        required: true,
    },
    id: {
        required: true,
    },
    modelValue: {},
    label: {},
});

const inner = computed({
    get: () => props.modelValue,
    set: (v) => emit('update:modelValue', v === true),
});
</script>
