import React from 'react'
import { List, Icon, Avatar } from 'antd';
import '../styles/sectionStyles.css';
import avatar from '../images/avatar.png';

function Message(props) {

    const AvatarSrc = props.who ==='Bot' ? <img src={avatar} /> : <Icon type="smile" />  

    return (
        <div>
            { props.who ==='Bot' &&
                <div className='chat_message'>
                    <List.Item>
                        <List.Item.Meta
                        avatar={<Avatar icon={AvatarSrc} />}
                        // title={props.who}
                        description={props.text}
                    />
                    </List.Item>
                   
                </div>
            }
             { props.who ==='user' &&
                <div className='chat_message chat_recieve'>
                    <List.Item >
                    <List.Item.Meta
                        //avatar={<Avatar icon={AvatarSrc} />}
                        //title={props.who}
                        description={props.text}
                    />
                    </List.Item>
                    
                </div>
            }
        </div>
    )
}

export default Message
