import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import crypto from 'crypto';

class GravatarImg extends PureComponent {
  render () {
    const {email, size: rawSize, className} = this.props;
    const size = rawSize || 100;
    const sanitizedEmail = email.trim().toLowerCase();
    const hash = crypto
      .createHash('md5')
      .update(sanitizedEmail)
      .digest('hex');
    const url = `https://www.gravatar.com/avatar/${hash}?s=${size * 2}`;
    const cssSize = `${size}px`;
    return (
      <img src={url}
           alt="Profile picture"
           className={className}
           title={sanitizedEmail}
           style={{width: cssSize, height: cssSize}}/>
    );
  }
}

GravatarImg.propTypes = {
  // Required
  email: PropTypes.string.isRequired,

  // Optional
  size: PropTypes.number,
  className: PropTypes.string
};

export default GravatarImg;