import React, { useEffect, useState } from "react"
import Layout from "../components/layout"

export default () => {
  const [opened, setOpened] = useState(false)

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

  return (
    <Layout>
      <h2>
        Raumtatus{" "}
        <span style={{ color: opened ? `green` : `darkred` }}>
          {opened ? "OFFEN" : "GESCHLOSSEN"}
        </span>
      </h2>
    </Layout>
  )
}