import React, { useEffect, useState } from "react"

const roomStateData = {
  loading: { text: "lade…", color: "white" },
  open: { text: "OFFEN", color: "#00aa00" },
  closed: { text: "GESCHLOSSEN", color: "#ee3333" },
}

export default () => {
  const [openState, setOpenState] = useState("loading")

  useEffect(() => {
    async function fetchState() {
      const response = await fetch("https://status.ctdo.de/api/simple/v2")
      const json = await response.json()
      setOpenState(json.state ? "open" : "closed")
    }
    fetchState()
  }, [])

  return (
    <span style={{ color: roomStateData[openState].color }}>
      {roomStateData[openState].text}
    </span>
  )
}