import Icon from "./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;