import React, { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';
import { PageSpinner } from './components';
import Arm from './pages/arm';

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='/dry-wash'>
          <Route index element={<Landing />} />
          <Route path='order-form' element={<OrderForm />} />
          <Route path='order-view' element={<OrderView />} />
        </Route>
        <Route path='/dry-wash/arm' element={<Arm />}></Route>
      </Routes>
    </Suspense>
  );
};

export default Routers;