import React, {lazy, Suspense} from 'react';
import PropTypes from 'prop-types';
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 component={PokemonShow} exact path={`${match.path}/:id`} />
          <Route component={PokemonIndex} exact path={`${match.path}`} />

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

Pokemon.propTypes = {
  match: PropTypes.object.isRequired,
};

export default Pokemon;