<template>
    <label class="relative inline-flex items-center cursor-pointer">
        <input
            type="checkbox"
            class="sr-only peer"
            @change="onChange()"
            v-model="val"
            :disabled="disabled">
        <span
            class="w-11 h-6 bg-[#ccc] rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[5px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all after:duration-300 peer-checked:bg-blue"
            :class="{ 'bg-[#e0e0e0]': disabled }" />
    </label>
</template>

<script>
export default {
    name: "CheckBox",
    props: {
        onChange: {
            type: Function,
            default: () => {}
        },
        value: {
            type: Boolean,
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            val: this.value
        }
    },
    updated() {
        this.val = this.value;
    }
}
</script>