import React, { Fragment, ReactElement, Suspense } from "react";
import { RouteConfig, RoutesProps } from "./components/Routes/types";
import { Routes, Route, Navigate } from "react-router-dom";
import { checkoutRoutes as routes } from "./components/Routes/routes";
import NotFound from "./modules/404";
import { store } from "./app/store";
import { Provider } from "react-redux";
import { BrowserRouter } from "react-router-dom";
const generateRoutes = (
  { path, Component }: RouteConfig,
  i: any
): ReactElement => {
  return (
    <Route
      key={i}
      path={path}
      element={
        <Suspense fallback={null}>
          <Component />
        </Suspense>
      }
    />
  );
};

const App: React.FC<RoutesProps> = () => {
  return (
    <Provider store={store}>
      <BrowserRouter>
        <Routes>
          <Route path="/">
            {routes.map((route, i) => (
              <Fragment key={i}>{generateRoutes(route, i)}</Fragment>
            ))}
          </Route>
          <Route path="*" element={<NotFound />} />
        </Routes>
      </BrowserRouter>
    </Provider>
  );
};

export default App;