<script lang="ts" setup>
  import { Tooltip } from 'ant-design-vue';
  import { formatToDateTime } from '/@/utils/dateUtil';
  import { useI18n } from '/@/hooks/web/useI18n';
  const props = defineProps<{
    time?: number | null;
  }>();

  const { t } = useI18n();

  const formatDate = (time?: Nullable<number>) => {
    return props.time
      ? formatToDateTime(time, 'YYYY-MM-DD HH:mm:ss')
      : t('visual.board.noUpdateTime');
  };
</script>

<template>
  <div
    class="flex p-2.5 justify-center items-center text-gray-400 text-xs w-full dark:text-light-50"
  >
    <Tooltip :title="formatDate(time)">
      <div class="truncate px-1">
        <span>{{ t('visual.board.updateTime') }}:</span>
        <span class="ml-2">{{ formatDate(time) }}</span>
      </div>
    </Tooltip>
  </div>
</template>