<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>
export default {
    props: {
        name: {
            required: true,
        },
        id: {
            required: true,
        },
        value: {},
        label: {},
    },

    computed: {
        inner: {
            get() {
                return this.value;
            },
            set(v) {
                this.$emit('input', v === true);
            },
        },
    },
};
</script>
