<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  asOf: string
  staleAfterMinutes: number
}>()

const ageMinutes = computed(() => Math.max(0, (Date.now() - new Date(props.asOf).getTime()) / 60_000))
const stale = computed(() => ageMinutes.value > props.staleAfterMinutes)
</script>

<template>
  <span :aria-label="stale ? '데이터 지연' : '데이터 최신'" :data-status="stale ? 'stale' : 'fresh'">
    {{ stale ? 'STALE' : 'FRESH' }} · {{ new Date(props.asOf).toLocaleString() }}
  </span>
</template>
