import { BrowserRouter, Route, Routes } from "react-router-dom"

import loadable from "@loadable/component"
import { Header } from "./pages/template/Header.tsx"


const HomePage = loadable(() => import("./pages/HomePage.tsx"))
const LoginPage = loadable(() => import("./pages/LoginPage.tsx"))
const RegisterPage = loadable(() => import("./pages/RegisterPage.tsx"))
const NotFoundPage = loadable(() => import("./pages/404.tsx"))
const CreateTeamPage = loadable(() => import("./pages/CreateTeamPage.tsx"))
const TeamPanelPage = loadable(() => import("./pages/TeamPanel.tsx"))
const NewTacticPage = loadable(() => import("./pages/NewTacticPage.tsx"))
const Editor = loadable(() => import("./pages/Editor.tsx"))


export default function App() {


    return (
        <div style={{ height: "100vh", width: "100vw" }}>
            <BrowserRouter>
                <Header/>

                <Routes>
                    <Route path={"/"} element={<HomePage />} />
                    <Route path={"/login"} element={<LoginPage />} />
                    <Route path={"/register"} element={<RegisterPage />} />

                    <Route path={"/team/new"} element={<CreateTeamPage />} />
                    <Route path={"/team/:teamId"} element={<TeamPanelPage />} />
                    <Route path={"/tactic/new"} element={<NewTacticPage />} />
                    <Route path={"/tactic/new/plain"} element={<Editor courtType={"PLAIN"} />} />
                    <Route path={"/tactic/new/half"} element={<Editor courtType={"HALF"} />} />

                    <Route path={"*"} element={<NotFoundPage />} />
                </Routes>
            </BrowserRouter>
        </div>
    )
}