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

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

export interface Props {
  pokemon: ShowPokemonDataType;
}

export 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
    }
  `,
});