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;