<script setup lang="ts">
import HealthDashboardView, { type HealthInfo } from './HealthDashboardView.vue'

// Wrapper: handles data fetching, delegates rendering to HealthDashboardView.
// Separation of concerns (SRP):
//   - HealthDashboard (this) = data layer (useFetch lifecycle)
//   - HealthDashboardView    = presentation layer (testable in Storybook + e2e)
//
// server: false → fetch client-side only. Avoids SSR fetching through the dev
// proxy (which can fail in some local setups), and lets Playwright route mocks
// apply. Same fix that landed for AppFooter in PR #40.
const { data, pending, error } = useFetch<HealthInfo>('/api/healthz', { server: false })
</script>

<template>
  <HealthDashboardView :data="data" :pending="pending" :error="error" />
</template>
