<template>
  <div class="col">
    <label :for="`${name}-input`" class="form-label">{{ label }}</label>
    <VueDatePicker
      v-model="value"
      :name="name"
      :disabled="readonly"
      :placeholder="label"
      format="dd MMMM yyyy"
      model-type="yyyy-MM-dd"
    ></VueDatePicker>
    <div class="text-red">{{ errorMessage }}</div>
  </div>
</template>
<script setup>
import { toRef } from "vue";
import { useField } from "vee-validate";
import VueDatePicker from "@vuepic/vue-datepicker";
import "@vuepic/vue-datepicker/dist/main.css";

const props = defineProps({
  modelValue: {
    default: null,
  },
  name: {
    type: String,
    required: false,
  },
  label: {
    type: String,
    required: true,
  },
  successMessage: {
    type: String,
    default: "",
  },
  placeholder: {
    type: String,
    default: "",
  },
  readonly: {
    type: Boolean,
    default: false,
  },
});

const name = toRef(props, "name");

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