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

const PokemonShow = lazy(() => import('./pokemon/show'));
const PokemonIndex = lazy(() => import('./pokemon/index'));

import NotFound from './not_found';

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

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

export default Pokemon;