import { Routes, Route, Navigate } from "react-router-dom";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";

// Import Navbar
import Navbar from "./Navbar.jsx";
// Import Pages
import Failing from "./failing/Failing.jsx";
import Alerting from "./alerting/Alerting.jsx";
import Jobs from "./jobs/Jobs.jsx";
import Catalog from "./catalog/Catalog.jsx";
import Settings from "./settings/Settings.jsx";
import About from "./about/About.jsx";

export default function Views() {

  return (
    <div className="view">
      <Navbar />

      <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
        <Toolbar />
        <Routes>
          <Route exact path="/" element={<Navigate to="/failing" replace />} />
          <Route path="/failing" element={<Failing />} />
          <Route path="/alerting" element={<Alerting />} />
          <Route path="/jobs" element={<Jobs />} />
          <Route path="/catalog" element={<Catalog />} />
          <Route path="/settings" element={<Settings />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Box>
    </div>
  );
}