<script setup lang="ts">
import { humaniseUptime } from '~/utils/uptime'

export interface AppInfo {
  version: string
  commit_short: string
  build_date: string
  uptime_seconds: number
  cache_enabled: boolean
  healthz_status: string
}

defineProps<{
  data: AppInfo | null | undefined
  pending: boolean
  error: { message: string } | null | undefined
}>()
</script>

<template>
  <footer data-testid="app-footer">
    <p v-if="pending" data-testid="app-footer-pending">v?</p>
    <p v-else-if="error" data-testid="app-footer-error">v? · info unavailable</p>
    <p v-else-if="data" data-testid="app-footer-info">
      <span data-testid="app-footer-version">v{{ data.version }}</span>
      <span> · commit </span>
      <span data-testid="app-footer-commit">{{ data.commit_short }}</span>
      <span> · uptime </span>
      <span data-testid="app-footer-uptime">{{ humaniseUptime(data.uptime_seconds) }}</span>
    </p>
  </footer>
</template>

<style scoped>
footer {
  border-top: 1px solid #ccc;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  color: #555;
  text-align: center;
}
footer p {
  margin: 0;
}
</style>
