import { useCallback } from 'react'; import shallow from 'zustand/shallow'; import { Type } from 'components'; import { FAIRY_GEN } from 'constants/constant'; import type { TPokemon } from 'constants/types'; import useStore from 'store'; import styles from './PokemonType.module.scss'; interface PokemonTypeProps { pokemon: TPokemon; } function PokemonType({ pokemon }: PokemonTypeProps): JSX.Element { const selectedGame = useStore( useCallback((state) => state.selectedGame, []), shallow ); return ( <div className={styles.container}> {pokemon.previousType && Number(selectedGame?.value) < FAIRY_GEN ? ( <> <Type type={pokemon?.previousType} /> {!!pokemon?.previousDualType && <Type type={pokemon?.previousDualType} />} </> ) : ( <> <Type type={pokemon?.type} /> {!!pokemon?.dualtype && <Type type={pokemon?.dualtype} />} </> )} </div> ); } export default PokemonType;