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 OrderForm = lazy(() => import('./pages/order-form'));
const OrderView = lazy(() => import('./pages/order-view'));

const Routers = () => {
  return (
    <Suspense fallback={<PageSpinner />}>
      <Routes>
        <Route path={URLs.landing.url} element={<Landing />} />
        <Route path={URLs.orderForm.url} element={<OrderForm />} />
        <Route path={URLs.orderView.url} element={<OrderView />} />
        <Route path='/dry-wash/arm/*' element={<Arm />}></Route>
        <Route path='*' element={<NotFound />} />
      </Routes>
    </Suspense>
  );
};

export default Routers;