import { Typography, IconButton } from '@mui/material'

type Props = {
  username: string
  avatarContent: string
  handleClick: (event: React.MouseEvent<HTMLElement>) => void
}

const Username = ({ username, avatarContent, handleClick }: Props) => {
  return (
    <IconButton
      aria-label="account of current user"
      aria-controls="menu-appbar"
      aria-haspopup="true"
      onClick={handleClick}
      color="inherit"
    >
      <img src={avatarContent} alt="user-avatar" className="profile-image" />
      <Typography
        variant="h6"
        sx={{
          color: '#3e3e3e',
          padding: '0 8px',
          display: { xs: 'none', md: 'flex' }
        }}
      >
        {username}
      </Typography>
    </IconButton>
  )
}

export default Username