<script setup>
import { computed } from "vue";
import { format as formatDate, isValid as isValidDate, toDate } from "date-fns";
defineOptions({ name: "ShwfedTableDateRendererRuntime" });
const props = defineProps({
  column: { type: null, required: true },
  ctx: { type: Object, required: true }
});
const formatted = computed(() => {
  const rawValue = props.ctx.cell.getValue();
  try {
    const date = typeof rawValue === "string" || typeof rawValue === "number" || rawValue instanceof Date ? toDate(rawValue) : null;
    if (date && isValidDate(date)) {
      return formatDate(date, props.column.format);
    }
  } catch {
  }
  return "-";
});
const hasDate = computed(() => formatted.value !== "-");
</script>

<template>
  <div
    :class="[
  'relative w-full py-2 px-1 flex items-center justify-center text-xs',
  hasDate ? 'text-zinc-600' : 'text-zinc-300 select-none'
]"
  >
    {{ formatted }}
  </div>
</template>
