import { Avatar, AvatarProps } from '@metafam/ds';
import { PlayerFragmentFragment } from 'graphql/autogen/types';
import React from 'react';
import {
  getPlayerImage,
  getPlayerName,
  hasPlayerImage,
} from 'utils/playerHelpers';

type PlayerAvatarProps = AvatarProps & { player: PlayerFragmentFragment };
export const PlayerAvatar: React.FC<PlayerAvatarProps> = ({
  player,
  ...props
}) => {
  const attrs = {
    src: getPlayerImage(player),
    name: getPlayerName(player),
    ...props,
  };
  if (hasPlayerImage(player)) attrs.bg = 'transparent';

  return <Avatar {...attrs} />;
};
