import React from 'react';
import Avatar from 'react-avatar';
import { getImageSource } from '../../helpers/getImageSource';
import { AvatarWrapper } from './styles';

type UserAvatarProps = {
  username: string;
  avatarUrl?: string;
  size?: number;
  asLink?: boolean;
  margin?: [number, number, number, number];
};

const UserAvatar = ({
  username,
  avatarUrl,
  size = 32,
  asLink = false,
  margin,
}: UserAvatarProps) => {
  return (
    <AvatarWrapper
      data-testid="avatar-wrapper"
      size={size}
      cursor={asLink ? 'pointer' : 'default'}
      margin={margin}
    >
      {avatarUrl ? (
        <img
          src={getImageSource(avatarUrl, 240)}
          alt={`@${username}`}
          width={size || 24}
          height={size || 24}
        />
      ) : (
        // fallback to text avatar
        <Avatar name={username} size={String(size)} textSizeRatio={2} round />
      )}
    </AvatarWrapper>
  );
};

export default UserAvatar;