import React from 'react';
import styles from './MessageBubble.module.css';

export default function MessageBubble({children, speaker, align, id}) {
  let className = ("left" === align) ? [styles.bln, styles.bleft].join(' ') : [styles.bln, styles.bright].join(' ');
  return (
    <div className={className} data-speaker={speaker} id={id}>
      {children}
    </div>
  );
}