import React, { useEffect, useState } from 'react'

import { createIcon } from '@download/blockies'

interface Props {
  className?: string
  account?: string
}

export const AccountAvatar: React.FC<Props> = ({ className, account }) => {
  const [avatarSrc, setAvatarSrc] = useState('')

  useEffect(() => {
    if (account) {
      const icon = createIcon({
        seed: account.toLowerCase(),
        size: 20, // width/height of the icon in blocks, default: 10
        scale: 8 // width/height of each block in pixels, default: 5
      })

      setAvatarSrc(icon.toDataURL())
    }
  }, [account])

  return account && avatarSrc ? <img className={className} src={avatarSrc} alt="" /> : null
}