import { Route, Routes } from 'react-router-dom'
import { BrowserRouter as Router } from 'react-router-dom'
import './app.css'
import { DefaultLayout } from './layouts'
import routes from './routes'
import "yet-another-react-lightbox/styles.css";
import { Login, NotFound } from './pages'
import { Provider } from 'react-redux'
import { persistore, store } from './store/config'
import { PersistGate } from 'redux-persist/integration/react'


export function App() {
  return (
    <>
        <Provider store={store}>
          <PersistGate persistor={persistore}>
            <Router>
              <Routes>
                <Route path='/login' element={<Login />} />
                <Route element={<DefaultLayout />}>
                  {routes.map(({ path, name, element }) => (
                    <>
                      <Route
                        path={path}
                        id={name}
                        element={element}
                      />
                    </>
                  ))}
                </Route>
                <Route path="*" element={<NotFound />} />
              </Routes>
            </Router>
          </PersistGate>
        </Provider>
    </>
  )
}