import { type FC } from 'react';

import AvatarUI from '@material-hu/mui/Avatar';
import { type SxProps, styled } from '@material-hu/mui/styles';

export type FormChatAvatarProps = {
  pictureUrl: string;
  sx?: SxProps;
};

const Avatar = styled(AvatarUI)({
  display: 'flex',
  justifyContent: 'center',
  backgroundColor: '#1264A3',
  borderRadius: '50%',
  alignItems: 'center',
  marginRight: '18px',
});

const FormChatAvatar: FC<FormChatAvatarProps> = props => {
  const { pictureUrl, sx } = props;

  return (
    <Avatar
      variant="square"
      sx={sx}
    >
      <img
        src={pictureUrl}
        alt=""
        style={{
          height: '65%',
          width: '65%',
        }}
      />
    </Avatar>
  );
};

export default FormChatAvatar;