import React, { createContext, useState } from "react"
import ReactDOM from "react-dom"
import { BrowserRouter, Route, Routes, useParams } from "react-router-dom"
import styled from "styled-components"

import AppProvider from "./appContext"
import Menu from "./components/Menu"
import PlayerListView from "./views/PlayerListView"

const render = () => (<AppProvider>
  <h1>Numenera Datasphere</h1>
  <div className="columns">
    <Menu />
    <Routes>
      <Route path="/" element={<div>root</div>} />
      <Route path="campaign" element={<div>campaign</div>} />
      <Route path="players" element={<PlayerListView />}>
        <Route path=":name" element={<PlayerListView />} />
      </Route>
      <Route path="cyphers" element={<div>cyphers</div>} />
      <Route path="battles" element={<div>battles</div>} />
    </Routes>
  </div>
</AppProvider>
)

export default render