import { IconButton, IconButtonProps } from '@mui/material'
import styles from './style.module.scss'
import { getRoboHashPicture } from '../../utils'

interface AvatarIconButtonProps extends IconButtonProps {
  src: string | undefined
  hexKey: string | undefined
}

/**
 *  This component displays profile image inside IconButton
 *  @param {string | undefined} props.src - image source or robohash picture
 *  @param {string | undefined} props.hexKey - robohash and affects border
 *  @param {IconButtonProps} props - component extends mui's  IconButton
 */
export const AvatarIconButton = (props: AvatarIconButtonProps) => {
  const { src, hexKey, ...rest } = props

  return (
    <IconButton {...rest}>
      <img
        src={src || getRoboHashPicture(hexKey)}
        alt="user image"
        className={`${styles.icon}`}
        style={{
          borderStyle: hexKey ? 'solid' : 'none',
          borderColor: `#${hexKey?.substring(0, 6)}`
        }}
      />
    </IconButton>
  )
}