<template>
  <div class="col">
    <div class="form-check">
      <input
        class="form-check-input"
        type="checkbox"
        :id="`${name}-input`"
        :name="name"
        :label="label"
        v-model="value"
        @blur="handleBlur"
      />
      <label
        :for="`${name}-input`"
        class="form-check-label"
        for="flexCheckDefault"
      >
        {{ label }}
      </label>
    </div>
  </div>
</template>
<script setup>
import { useField } from "vee-validate";

const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    default: null,
  },
  type: {
    type: String,
    default: "text",
  },
  name: {
    type: String,
    required: false,
  },
  label: {
    type: String,
    required: true,
  },
  successMessage: {
    type: String,
    default: "",
  },
  placeholder: {
    type: String,
    default: "",
  },
  value: {
    type: String,
    default: null,
  },
  readonly: {
    type: Boolean,
    default: false,
  },
  rules: {
    default: undefined,
  },
});

const { value, errorMessage, handleBlur } = useField(
  () => props.name,
  props.rules,
  {
    syncVModel: true,
  }
);
</script>
