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

const PokemonShow = lazy((): Promise<any> => import('./pokemon/Show'));
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={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;