import React from 'react';
import {get} from 'lodash/fp';
import ThreadContent from '../../../../../models/ThreadContent';
import Text from '../Text';
import Info from '../Info';
import UserImageBubble from '../../../../../app/components/UserImageBubble';
import {displayName, profilePicture} from '../../../../../helpers/user';

interface Props {
  threadContent: ThreadContent;
}
const TheirMessage = ({threadContent}: Props) => {

  const {author} = threadContent;
  const imageProps = {
    displayName: displayName(author),
    profilePictureUrl: profilePicture(author)
  };

  return (
    <div className='wrapper' data-msg-key={get('contentInstance.id', threadContent)}>
      <div className='media-object' data-animate='slide-in-right slide-out-right'>
        <UserImageBubble {...imageProps} />
        <div className='media-object-section middle'>
          <div className='small talk-bubble border tri-right left-in'>
            <Text threadContent={threadContent} />
          </div>
          <Info threadContent={threadContent} />
        </div>
      </div>
    </div>
  );
};
export default TheirMessage;