import { useEffect, useState } from 'react'

export default function App() {
  const [health, setHealth] = useState(null)
  const [error, setError] = useState(null)

  useEffect(() => {
    fetch('/api/health')
      .then((res) => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`)
        return res.json()
      })
      .then(setHealth)
      .catch((err) => setError(err.message))
  }, [])

  return (
    <main className="shell">
      <h1>Jinkendo Kairo</h1>
      <p>Operativer Program Director — Sprint 0 / AP0.1</p>
      <section className="card">
        <h2>API Health</h2>
        {error && <p className="error">Fehler: {error}</p>}
        {!error && !health && <p>Lade …</p>}
        {health && (
          <pre>{JSON.stringify(health, null, 2)}</pre>
        )}
      </section>
    </main>
  )
}