import React, { FunctionComponent, useEffect, useState } from 'react';
import md5 from 'crypto-js/md5';

export interface GravatarProps {
  className?: string
  email: string
}

const defaultAvatarUrl = 'https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&s=128';

export const Gravatar:FunctionComponent<GravatarProps> = ({ className, email }) => {
  const [ avatarUrl, setAvatarUrl ] = useState(defaultAvatarUrl);
  useEffect(() => {
    const hash = md5(email.trim().toLowerCase());
    setAvatarUrl(`https://www.gravatar.com/avatar/${hash}?d=mp&s=128`);
  }, [email]);
  return (
    <img className={className} src={avatarUrl} />
  );
}