<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getHealth } from '../api/health'

const backendStatus = ref<string | null>(null)
const backendError = ref<string | null>(null)

onMounted(async () => {
  try {
    const data = await getHealth()
    backendStatus.value = data.status
  } catch (err) {
    backendError.value = err instanceof Error ? err.message : 'unknown error'
  }
})
</script>

<template>
  <main class="flex flex-col items-center justify-center min-h-screen gap-4">
    <h1 class="text-4xl font-bold">Hello, OSDB!</h1>

    <div v-if="backendStatus" class="text-green-600">
      Backend: {{ backendStatus }}
    </div>
    <div v-else-if="backendError" class="text-red-600">
      Backend unreachable: {{ backendError }}
    </div>
    <div v-else class="text-gray-400">
      Checking backend…
    </div>
  </main>
</template>
