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

import { Box } from "@mui/material";
import styles from "react-responsive-carousel/lib/styles/carousel.min.css";
import { actionPageStart } from "../../actions/actionPageStart";
import { useDispatch, useSelector } from "react-redux";

import { AuthPage } from "../AuthPage";
import { LayoutPage } from "../LayoutPage";
import { CProtectedRoute } from "../common/ProtectedRoute";
import { Error404 } from "../common/Error404";

const Root = () => {
    const dispatch = useDispatch();
    dispatch(actionPageStart());

    return (
        <Box className="Root">
            <Routes>
                <Route
                    path="/auth"
                    element={
                        <CProtectedRoute roles={["anon"]} fallback="/admin">
                            <AuthPage />
                        </CProtectedRoute>
                    }
                />
                <Route path="/404" element={<Error404 />} />
                <Route path="/*" element={<LayoutPage />} />
                <Route path="*" element={<Navigate to="/404" />} />
            </Routes>
        </Box>
    );
};

export { Root };