import React from 'react';
import './App.css';

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

import {Box, Stack} from '@mui/material';

import Navbar from "./components/Navbar";
import Sidebar from "./components/Sidebar";
//import Feed from "./components/Feed";

import PurchaseDetails from "./components/PurchaseDetails.component";
import ArticleDetails from "./components/ArticleDetails.component";
import ArticleOverview from "./components/ArticleOverview.component";
import PurchaseOverview from "./components/PurchaseOverview.component";
import AnalysesOverview from "./components/AnalysesOverview.component";

//import MyRoutes from './MyRoutes';

const App = () => {
  
  return (
    <Box>
        {/* Set up the browser router */}
        <BrowserRouter>
            {/* Render the navbar */}
            <Navbar />
            {/* Set up a stack layout with a sidebar and content */}
            <Stack direction="row" spacing={2} justifyContent="space-between">
            {/* Render the sidebar */}
            <Sidebar />
            {/* Set up the routes */}
            <Routes>
                {/* Set up the route for the purchase overview */}
                <Route path="/" element={<PurchaseOverview />} exact/>
                {/* Set up the route for the purchase details */}
                <Route path="/PurchaseDetails" element={<PurchaseDetails />} />
                {/* Set up the route for the article details */}
                <Route path="/ArticleDetails" element={<ArticleDetails />} />
                {/* Set up the route for the article overview */}
                <Route path="/Articles" element={<ArticleOverview />} />
                {/* Set up the route for the analyses overview */}
                <Route path="/Analyses" element={<AnalysesOverview />} />
            </Routes>
            
            </Stack>
            
        </BrowserRouter>
      
    </Box>
  );
}

export default App;
