import React from 'react';
import { Provider } from 'react-redux';
import { Route, Routes } from 'react-router-dom';
import MainPage from './pages/HomePage';
import NotFound from './pages/NotFound';
import UserPage from './pages/UserPage';
import Register from './pages/Register';
import Login from './pages/Login';
import Admin from './pages/admin/Admin';
import Cart from './pages/Cart';
import Category from './pages/Category/Category';
import Good from './pages/Good/Good';
import Layout from './components/Layout';
import store from './redux/reducers';
import { Box } from '@mui/material';
import RequireAuth from './components/hoc/RequireAuth';
import RequireAdmin from './components/hoc/RequireAdmin';
import Users from './pages/admin/Users';
import Categories from './pages/admin/Categories';
import CreateCategory from './pages/admin/CreateCategory';


function App() {
  return (
    <Box sx={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
      <Provider store={store}>
        <Routes>
          <Route path='/' element={<Layout />}>
            <Route index element={<MainPage />} />
            <Route path='/user/:userId' element={
              <RequireAuth>
                <UserPage />
              </RequireAuth>
            } />
            <Route path='/cart' element={<Cart />} />
            <Route path='/admin' element={
              <RequireAdmin>
                <Admin />
              </RequireAdmin>
            } />
            <Route path='/admin/users' element={
              <RequireAdmin>
                <Users />
              </RequireAdmin>
            } />
            <Route path='/admin/categories' element={
              <RequireAdmin>
                <Categories />
              </RequireAdmin>
            } />
            <Route path='/admin/createCategory' element={
              <RequireAdmin>
                <CreateCategory />
              </RequireAdmin>
            } />
            <Route path='/register' element={<Register />} />
            <Route path='/login' element={<Login />} />
            <Route path='/:category/:categoryId' element={<Category />} />
            <Route path='/good/:goodId' element={<Good />} />
            <Route path='*' element={<NotFound />} />
          </Route>
        </Routes>
      </Provider>
    </Box>
  );
}

export default App;
