import { Routes, Route, Link } from 'react-router'
import './App.css'
import TemplatePage from './pages/TemplatePage/Template.tsx'
import Home from './pages/Home/Home.tsx'
import Robot from './pages/Robot/Robot.tsx';
import ConnectedRobots from './pages/ConnectedRobots/ConnectedRobots.tsx'
import VisProg from "./pages/VisProgPage/VisProg.tsx";
import {useState} from "react";
import Logging from "./components/Logging/Logging.tsx";

function App(){
  const [showLogs, setShowLogs] = useState(false);

  return (
    <>
      <header>
        <Link to={"/"}>Home</Link>
        <button onClick={() => setShowLogs(!showLogs)}>Toggle Logging</button>
      </header>
      <div className={"flex-row justify-center flex-1 min-height-0"}>
        <main className={"flex-col align-center flex-1 scroll-y"}>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/template" element={<TemplatePage />} />
            <Route path="/editor" element={<VisProg />} />
            <Route path="/robot" element={<Robot />} />
            <Route path="/ConnectedRobots" element={<ConnectedRobots />} />
        </Routes>
        </main>
        {showLogs && <Logging />}
      </div>
    </>
  );
}

export default App