<script setup lang="ts">
export interface HealthInfo {
  status: string
  version: string
  uptime_seconds: number
  timestamp: string
}

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

<template>
  <section data-testid="health-dashboard">
    <h2>Server Health</h2>
    <p v-if="pending" data-testid="health-loading">Loading...</p>
    <p v-else-if="error" data-testid="health-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>
