import cs from 'classnames';
import classes from './FaceMessage.module.scss';
import type { MessageInfo, FaceMessagePayload } from 'tuikit-atomicx-react/chat';

interface FaceMessageProps {
  message: MessageInfo;
}

const FaceMessage = (props: FaceMessageProps) => {
  const { message } = props;

  const payload = message.messagePayload as FaceMessagePayload;

  return (
    <div className={cs(classes['face-message'], {
      [classes['face-message--self']]: message.isSentBySelf,
      [classes['face-message--other']]: !message.isSentBySelf,
    })}>
      <img src={payload.faceData} alt={`face-${payload.faceIndex}`} />
    </div>
  );
};

export default FaceMessage;