<script setup lang="ts">
interface HealthInfo {
  status: string
  version: string
  uptime_seconds: number
  timestamp: string
}
const { data, pending, error } = await useFetch<HealthInfo>('/api/healthz')
</script>
<template>
  <section data-testid="health-dashboard">
    <h2>Server Health</h2>
    <p v-if="pending">Loading...</p>
    <p v-else-if="error">Error loading health: {{ error.message }}</p>
    <ul v-else-if="data" data-testid="health-info">
      <li><strong>Status:</strong> <span data-testid="health-status">{{ data.status }}</span></li>
      <li><strong>Version:</strong> {{ data.version }}</li>
      <li><strong>Uptime:</strong> {{ data.uptime_seconds }} seconds</li>
      <li><strong>Last check:</strong> {{ data.timestamp }}</li>
    </ul>
  </section>
</template>
