import React from "react"
import ReactDOM from "react-dom/client"

import axios from "axios"

import "./index.css"

const API_ENDPOINT = import.meta.env.PROD ? "/api" : `http://${window.location.hostname}:3000/api`

const App = () => {
  const [loading, setLoading] = React.useState(true)
  const [randomWord, setRandomWord] = React.useState(null)

  async function loadRandom({
    random = true,
  } = {}) {
    setLoading(true)

    let { data } = await axios({
      url: API_ENDPOINT,
      method: "GET",
      params: {
        random,
      },
    })

    setLoading(false)

    setRandomWord(data)
  }

  React.useEffect(() => {
    loadRandom()
  }, [])

  return <div className="app">
    {
      loading ? <p>Loading...</p> : <h1>{randomWord}</h1>
    }

    <footer>
      <a href="https://git.ragestudio.net/srgooglo/monstercanker">GitHub</a>
      <a href={API_ENDPOINT}>API</a>
    </footer>
  </div>
}

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)