import * as React from 'react';
import {graphql, createFragmentContainer} from 'react-relay';

import {Show_pokemon as ShowPokemon} from '../../../__generated__/Show_pokemon.graphql';

interface Props {
  pokemon: ShowPokemon;
}

function PokemonShow({pokemon}: Props): React.FunctionComponentElement<Props> {
  const {id, iid, nickname, pokedexNumber} = pokemon;
  return (
    <>
      {nickname}:{' '}
      <ul>
        <li>IID: {iid}</li>
        <li>GraphQL ID: {id}</li>
        <li>Dex #: {pokedexNumber}</li>
      </ul>
    </>
  );
}

export default createFragmentContainer(PokemonShow, {
  pokemon: graphql`
    fragment Show_pokemon on Pokemon {
      id
      iid
      nickname
      pokedexNumber
    }
  `,
});