<script setup>
import { computed } from "vue";
import { Datetime } from "../../utils/datetime";
const props = defineProps({
  modelValue: { type: String, required: false },
  locale: { type: String, required: false, default: "TH" },
  fromFormat: { type: String, required: false },
  format: { type: String, required: false, default: "shortDate" }
});
const formattedDate = computed(() => {
  if (!props.modelValue) {
    return null;
  }
  const dateTime = Datetime().fromString(props.modelValue, props.fromFormat);
  return dateTime.luxonDateTime.isValid ? dateTime.toFormat(props.format, props.locale) : props.modelValue;
});
</script>

<template>
  {{ formattedDate }}
</template>
