import * as React from 'react'
import { Status } from '../../interfaces/status'
import InlineSVG from 'svg-inline-react'
const defaultAvatar = require('../../../img/svg/default-avatar.svg')

interface Props {
  email: string,
  avatarUrl?: string,
  avatarStatus?: Status,
}

const Avatar = ({ email, avatarUrl, avatarStatus }: Props): JSX.Element => {
  if (email) {
    if (avatarStatus === Status.Success) {
      return <img className="popup-feed-activity-group-avatar" src={avatarUrl} />
    }

    if (avatarStatus === Status.Failure) {
      return <div className="popup-feed-activity-group-default-avatar" >{email.charAt(0).toUpperCase()} </div>
    }
  }
  return <InlineSVG src={defaultAvatar} />
}

export default Avatar