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

const PokemonIndex = lazy((): Promise<any> => import('./pokemon/Index'));

import NotFound from './NotFound';

function Pokemon({match}: RouteComponentProps<void>): React.FunctionComponentElement<void> {
  return (
    <>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route component={PokemonIndex} exact path={`${match.path}`} />

          <Route component={NotFound} />
        </Switch>
      </Suspense>
    </>
  );
}

export default Pokemon;