import React from 'react';
import logo from './logo.svg';
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
import Home from './components/home/Home';
import About from './components/about/About';
import Sidebar from './components/navigation/Sidebar';
import Header from './components/navigation/Header';
import { CssVarsProvider } from '@mui/joy/styles';
import './App.css';

import { Box, CssBaseline } from "@mui/joy";
import NewsChannels from "./components/news/NewsChannels";
import LatestNews from "./components/news/LatestNews";
import NotFound from "./components/NotFound";
import Article from "./components/news/Article";
import NewsChannel from "./components/news/NewsChannel";
import Settings from "./components/Settings";
import Tags from "./components/news/Tags";
import Tag from "./components/news/Tag";

function App() {
    return (
        <BrowserRouter basename="/">
            <CssVarsProvider disableTransitionOnChange>
                <CssBaseline />
                <Box sx={{ display: 'flex', minHeight: '100dvh' }}>
                    <Sidebar />
                    <Header />
                    <Box
                        component="main"
                        className="MainContent"
                        sx={{
                            pt: { xs: 'calc(12px + var(--Header-height))', md: 3 },
                            pb: { xs: 2, sm: 2, md: 3 },
                            flex: 1,
                            display: 'flex',
                            flexDirection: 'column',
                            minWidth: 0,
                            height: '100dvh',
                            gap: 1,
                            overflow: 'auto',
                        }}
                    >
                        <Box sx={{
                            flex: 1, width: '100%',
                            padding: 2,
                        }}>
                            <Routes>
                                <Route path="/" element={<Home />} />
                                <Route path="/latest" element={<LatestNews />} />
                                <Route path="/tags" element={<Tags />} />
                                <Route path="/tags/:tag" element={<Tag />} /> 
                                <Route path="/article/:id" element={<Article />} />
                                <Route path="/news-channels" element={<NewsChannels />} />
                                <Route path="/news-channels/:id" element={<NewsChannel />} />
                                <Route path="/settings" element={<Settings />} />
                                <Route path="/about" element={<About />} />
                                <Route path="/not-found" element={<NotFound />} />
                                <Route path="*" element={<Navigate to="/not-found" replace />} />
                            </Routes>
                        </Box>
                    </Box>
                </Box>
            </CssVarsProvider>
        </BrowserRouter >
    );
}

export default App;
