import { makeStyles } from '@mui/styles';
import { Route, BrowserRouter, Routes } from 'react-router-dom';
import Header from './components/Header/Header';
import { AuthContextProvider } from './context/AuthContext';
import Cart from './pages/Cart';
import Login from './pages/Login';
import Main from './pages/Main';
import Products from './pages/Products';
import Register from './pages/Register';
import Seller from './pages/Seller';

const useStyles = makeStyles({
  root: {
    fontFamily: 'Noto Sans KR',
  },
});

function App() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <BrowserRouter>
        <AuthContextProvider>
          <Header />
          <Routes>
            <Route exact path="/" element={<Main />} />

            <Route exact path="/shopping/:category" element={<Products />} />

            <Route exact path="/login" element={<Login />} />

            <Route exact path="/register" element={<Register />} />

            <Route exact path="/seller" element={<Seller />} />

            <Route exact path="/cart" element={<Cart />} />
          </Routes>
        </AuthContextProvider>
      </BrowserRouter>
    </div>
  );
}

export default App;