import React from 'react';

import {AppPokemonIndexQueryResponse} from '../../../__generated__/AppPokemonIndexQuery.graphql';
import PokemonShow from './Show';

function PokemonIndex(
  props: AppPokemonIndexQueryResponse
): React.ReactElement<void> {
  return (
    <ul>
      {props.pokemonConnection.edges.map(
        (edge): React.ReactNode => (
          <li key={edge.node.id}>
            <PokemonShow pokemon={edge.node} />
          </li>
        )
      )}
    </ul>
  );
}

export default PokemonIndex;