'use client'

import { useEffect, useState } from 'react'

interface VersionInfo {
  version: string
  full_version: string
  timestamp: number
}

export default function VersionDisplay() {
  const [versionInfo, setVersionInfo] = useState<VersionInfo | null>(null)

  useEffect(() => {
    const fetchVersion = async () => {
      try {
        const response = await fetch('/api/version')
        if (response.ok) {
          const data = await response.json()
          setVersionInfo(data)
        }
      } catch (error) {
        console.warn('Failed to fetch version:', error)
      }
    }

    fetchVersion()
  }, [])

  if (!versionInfo) {
    return (
      <div className="text-xs text-gray-500">
        BZZZ
      </div>
    )
  }

  return (
    <div className="text-xs text-gray-500">
      BZZZ {versionInfo.full_version}
    </div>
  )
}