import React from 'react';
import Avatar from '@mui/material/Avatar';
import { AccountCircleOutlined } from '@mui/icons-material';

const UserAvatar = ({ user, size = 'sm' }) => {

  const sx = theme => ({
    bgcolor: 'transparent',
    mb: 0,
    ...(
      size === 'lg'
        ? {
          width: {
            xs: theme.spacing(24),
            md: theme.spacing(32),
          },
          height: {
            xs: theme.spacing(24),
            md: theme.spacing(32),
          },
        }
        : size === 'md'
          ? {
            width: theme.spacing(8),
            height: theme.spacing(8),
          }
          : {
            width: theme.spacing(4),
            height: theme.spacing(4),
          }
    ),
  });

  if (!user.github) {
    return (
      <Avatar sx={sx} alt={user.name}>
        <AccountCircleOutlined color="black" sx={sx} />
      </Avatar>
    );
  }

  return (
    <Avatar
      sx={sx}
      alt={user.name}
      src={user.avatar(
        size === 'lg'
          ? 256
          : size === 'md'
            ? 64
            : 36
      )}
    />
  );
};

export default UserAvatar;