<script setup>
import { computed } from "vue";
const props = defineProps({
  modelValue: {
    type: [Number, String, Boolean, Array],
    required: true,
  },
  error: {
    type: String,
    default: "",
  },
  help: {
    type: String,
    default: "",
  },
  required: {
    type: Boolean,
    default: false,
  },
  id: {
    type: String,
    default: () => Math.random().toString(20).substr(2, 10),
  },
  name: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  autocomplete: {
    type: String,
    default: "",
  },
  value: {
    type: [Number, String, Boolean, Array],
    default: "",
  },
  label: {
    type: String,
    default: "",
  },
});
const emit = defineEmits(["update:modelValue", "keyup"]);
const componentValue = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});
</script>
<template>
  <div class="flex flex-col gap-1 justify-center">
    <div class="flex items-center">
      <input
        :id="id"
        v-model="componentValue"
        :disabled="disabled"
        :required="required"
        type="checkbox"
        class="w-4 h-4 text-primary-800 bg-gray-100 !border-gray-300 !rounded focus:ring-primary-500 dark:focus:ring-primary-800 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 !cursor-pointer"
        :name="name ? name : id"
        :value="value"
      />
      <label
        :for="id"
        :class="`${
          disabled ? 'text-gray-200' : 'text-gray-900'
        } ms-2 text-sm font-medium dark:text-white !cursor-pointer`"
      >
        <slot v-if="!label" name="label" />
        <template v-else>{{ label }}</template>
      </label>
    </div>
    <div v-if="help" class="text-xs text-gray-500 dark:text-gray-400">
      {{ help }}
    </div>
  </div>
</template>
