<script setup lang="ts">
interface Props {
    modelValue?: any
    color?: 'regular' | 'primary'
    checked?: boolean
    disabled?: boolean
}

const props = withDefaults(defineProps<Props>(), {
    color: 'regular'
})

const emit = defineEmits<{
    'update:modelValue': [value: any]
}>()

const styleClass = computed(() => {
    const colorVariants = {
        regular: '',
        primary: 'dui-checkbox-primary'
    }
    const colorClass = colorVariants[props.color]
    return [colorClass]
})
</script>
<template>
    <input
        type="checkbox"
        class="dui-checkbox dui-checkbox-sm border-secondary"
        :class="styleClass"
        :checked="props.modelValue || props.checked"
        @change="emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
        :disabled="props.disabled"
    />
</template>
