import chatGptIcon from '../img/icon-chatgpt.png';

import UserIcon from '../img/icon-user.png';


function Message(args) {
    return (
        <>
            {args?.self &&
                <div className='animate-[fadeIn_0.5s_ease-out] flex items-start gap-2 w-full flex-row-reverse'>
                    <img src={UserIcon} className='h-12' />

                    <span className='text-white px-4 py-2 text-md rounded-xl bg-gradient-to-br from-orange-400 to-orange-600 break-normal leading-5 shadow-sm'>
                        {args?.text}
                    </span>
                </div>
            }
            {!args?.self &&
                <div className='animate-[fadeIn_0.5s_ease-out] flex items-end gap-2'>
                    <img src={chatGptIcon} className='h-12' />
                    <span className='px-4 py-2 text-md rounded-xl dark:bg-gray-800 bg-gray-200 break-normal w-full leading-5 shadow-sm'>
                        {args?.text}
                    </span>
                </div>
            }

        </>
    );
}

export default Message;