<script setup>
import { computed, onMounted } from "vue";
import MdrCheckboxField from "@/components/Mudur-Ui-Kit/MdrCheckboxField.vue";

const props = defineProps({
  modelValue: { type: [Array, String], required: true },
});
const emit = defineEmits(["update:modelValue"]);
const componentValue = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});

onMounted(() => {
  componentValue.value = !componentValue.value ? [] : componentValue.value;
});

const days = [
  "monday",
  "tuesday",
  "wednesday",
  "thursday",
  "friday",
  "saturday",
  "sunday",
];
</script>
<template>
  <div class="grid grid-cols-2 gap-1">
    <MdrCheckboxField
      v-for="day in days"
      :id="`ginvoice-day-${day}`"
      :key="day"
      v-model="componentValue"
      name="ginvoice-day-select"
      :value="day"
      :label="$t(day)"
    />
  </div>
</template>
