import Icon from '../../shared/components/icon';
import React from 'react';
import { buildClassName } from '../../shared/utils/class-util';

interface MessageProps {
  type: 'error' | 'success';
  title: string;
  actionComponent?: JSX.Element;
  children?: JSX.Element | JSX.Element[];
}

const Message: React.FC<MessageProps> = ({ type, title, actionComponent, children }) => (
  <div className={buildClassName(['booking-message', type === 'error' && 'booking-message--error', type === 'success' && 'booking-message--success'])}>
    {type === 'error' && <Icon name="ui-error" />}
    <h4 className="booking-message__heading">{title}</h4>
    <div className="booking-message__text">{children}</div>
    {actionComponent && <div className="booking-message__actions">{actionComponent}</div>}
  </div>
);

export default Message;