import React, { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';

import { PageSpinner } from './components';
import Arm from './pages/arm';
import { URLs } from './__data__/urls';
import NotFound from './pages/notFound/notFound';

const Landing = lazy(() => import('./pages/landing'));
const OrderCreate = lazy(() => import('./pages/order-create'));
const OrderView = lazy(() => import('./pages/order-view'));

const Routers = () => {
  return (
    <Suspense fallback={<PageSpinner />}>
      <Routes>
        <Route path={URLs.landing.url}>
          <Route index element={<Landing />} />
          <Route path={URLs.orderCreate.url} element={<OrderCreate />} />
          <Route path={URLs.orderView.url} element={<OrderView />} />
        </Route>
        {URLs.armBase.isOn && (
          <Route path={URLs.armBase.url} element={<Arm />}></Route>
        )}
        <Route path='*' element={<NotFound />} />
      </Routes>
    </Suspense>
  );
};

export default Routers;