import { useState, useEffect } from 'react'
import { getHealth } from '../api'
import { Spinner } from './Common'

export default function Health() {
  const [data, setData] = useState<{ version: string } | null>(null)
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    getHealth()
      .then(setData)
      .catch((e) => setError(e.message))
      .finally(() => setLoading(false))
  }, [])

  if (loading) return <Spinner />
  if (error) return <div className="text-red-500 text-center p-8">Error: {error}</div>

  return (
    <div className="max-w-2xl mx-auto">
      <h2 className="text-lg font-semibold text-white tracking-tight mb-5">Health Check</h2>
      <div className="bg-surface-1 border border-white/[0.06] rounded-lg p-8">
        <div className="flex items-center gap-3 mb-4">
          <div className="relative">
            <div className="w-4 h-4 bg-green-500 rounded-full"></div>
            <div className="absolute inset-0 w-4 h-4 bg-green-500 rounded-full animate-ping opacity-75"></div>
          </div>
          <span className="text-green-500 font-semibold text-lg">System Online</span>
        </div>
        <div className="text-gray-400 mt-4 flex items-baseline gap-2">
          <span>Version:</span>
          <span className="text-white font-mono bg-surface-3/50 px-3 py-1 rounded">{data?.version}</span>
        </div>
      </div>
    </div>
  )
}
