<script setup lang="ts">
// imports

import DatePicker from "vue3-persian-datetime-picker";

// types

type Props = {
    modelValue: string;
};

type Emits = {
    "update:modelValue": [value: string];
};

// props

const props = defineProps<Props>();

const { modelValue } = toRefs(props);

// emit

const emit = defineEmits<Emits>();

// computed

const value = computed({
    get: () => modelValue.value ?? "",
    set: (value) => emit("update:modelValue", value),
});
</script>

<template>
    <ClientOnly>
        <DatePicker
            format="YYYY-MM-DD"
            displayFormat="jYYYY-jMM-jDD"
            :editable="false"
            placeholder="وارد نشده"
            altFormat="jYYYY-jMM-jDD"
            color="#000000"
            inputClass="!py-1 lg:!py-[9px] placeholder-slate-400 !rounded-s-md lg:!rounded-s-100 !border-[1.5px] hover:!border-black !transition-all !border-slate-200 text-xs lg:text-sm"
            :autoSubmit="false"
            v-model="value"
        />
    </ClientOnly>
</template>
