<template>
  <div class="flex items-center gap-2 text-xs text-text-dim">
    <span
      class="w-2 h-2 rounded-full"
      :class="online ? 'bg-green-500' : 'bg-red-500 animate-pulse'"
    />
    <span>{{ online ? 'API online' : 'API offline' }}</span>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const online = ref(false)
const BASE = import.meta.env.BASE_URL.replace(/\/$/, '')

onMounted(async () => {
  try {
    const res = await fetch(`${BASE}/health`)
    online.value = res.ok
  } catch {
    online.value = false
  }
})
</script>
