<template>
    <div class="relative">
        <div class="grid grid-cols-1 gap-2">
            <div class="text-sm text-gray-600" v-text="intro" v-if="intro"></div>
            <label :for="id" class="p-0 block leading-none relative flex items-start">
                <input :id="id" v-model="inner" type="checkbox" :name="name" class="peer absolute invisible" />
                <span
                    class="border-neutral-400 border-4 group-[.info]:border-2 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 group-[.info]:w-4 group-[.info]:h-4 group-[.info]:top-[5px] rounded block top-0"
                ></span>
                <span class="peer-checked:bg-primary left-[0.5rem] top-[0.5rem] group-[.info]:top-[0.58rem] group-[.info]:left-[0.25rem] w-2 h-2 absolute rounded block top-0"></span>
                <span v-if="label" class="pl-8 group-[.info]:pl-6 pt-1 @sm:pt-0 @sm:group-[.info]:pt-1 text-gray-600 text-sm @sm:text-base @sm:group-[.info]:text-sm">
                    <span v-text="label"></span>
                    <span v-show="required" class="text-red-800"> *</span>
                </span>
                <hint :value="hint" class="ml-2" v-if="hint"></hint>
            </label>
        </div>
    </div>
</template>

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

const emit = defineEmits(['update:modelValue']);
const props = defineProps({
    modelValue: {
        required: true,
        validator: (value) => value === true || value === false,
    },
    id: {
        required: true,
        type: String,
    },
    name: {
        required: true,
        type: String,
    },
    label: {
        required: false,
        type: String,
        default: () => '',
    },
    required: {
        required: false,
        type: Boolean,
        default: () => false,
    },
    hint: {
        required: false,
        validator: (value) => value === null || typeof value === 'string',
        default: () => null,
    },
    intro: {
        required: false,
        validator: (value) => value === null || typeof value === 'string',
        default: () => null,
    },
});

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