import { Route, Routes } from "react-router-dom";
import LayoutPublic from "./components/LayoutPublic";
import './App.css';
import HomePage from "./components/public-pages/HomePage";
import CategoryOnePage from "./components/public-pages/CategoryOnePage";
import { CssBaseline } from "@mui/material";
import ProductOnePage from "./components/public-pages/ProductOnePage";
import LoginPage from "./components/public-pages/LoginPage"
import ProfilePage from "./components/public-pages/ProfilePage";
import Registration from "./components/public-pages/Registration";
import RequireAuth from "./hoc/RequireAuth";
import NoRequireAuth from "./hoc/NoRequireAuth";
import LayoutAdmin from "./components/adminPage/LayoutAdmin";




function App() {
  return (
    <>
    <CssBaseline />
      <Routes>
        <Route path='*' element={<LayoutPublic />}>
          <Route index element={<HomePage/>}/>
          <Route path='*' element={<p>Страница не найдена</p>}/>
          <Route path="about" element={<p>о магазине</p>}/>
          <Route path="category/:catId/*" element={<CategoryOnePage/>}/>
          <Route path="product/:prodId/*" element={<ProductOnePage/>}/>

          <Route path="login" element={
          <NoRequireAuth>
            <LoginPage/>
          </NoRequireAuth>
          }/>

          <Route path="profile" element={
          <RequireAuth>
            <ProfilePage/>
          </RequireAuth>
          }/>

          <Route path="registration" element={
            <NoRequireAuth>
              <Registration/>
            </NoRequireAuth>
            }/>
        </Route>
        <Route path='admin' element={<LayoutAdmin />}>
          <Route index element={<p>index</p>}/>
          <Route path='*' element={<p>Страница не найдена</p>}/>
        </Route>
        {/* <Route path='admin/*' element={
        <RequireAuthIsAdmin>
          <p>админка</p>
        </RequireAuthIsAdmin>
        /> */}
      </Routes>
    </>
  );
}


export default App;