import React from 'react';
import NotificationBlockCss from './notification-block.module.css';

export type Props = {
	avatarUrl: string;
	taskTitle?: string;
	children?: any;
};

export const NotificationBlock = (props: Props) => {
	const taskTitle = props?.taskTitle
		? (<span className={NotificationBlockCss.text_box_text_blue}>{props.taskTitle} </span>)
		: (<></>);
	return (
		<div className={NotificationBlockCss.message}>
			<img src={props.avatarUrl} alt="event_emitter_eltex_loc" className={NotificationBlockCss.event_emitter_eltex_loc_icon} />
			<div className={NotificationBlockCss.text_box}>
				<p className={NotificationBlockCss.text_box_text}>
					{taskTitle}
					{props.children}
				</p>
			</div>
		</div>
	);
};

export default NotificationBlock;