import { CSSTransition } from "react-transition-group";
import * as React from "react";

import { Button, ButtonSize, ButtonType, IButtonProps } from "../Button";
import { Icon } from "../Icon";

import { markdownToHtml } from "../../utilities/strings";

interface IBannerProps {
  text: string;
  mount: boolean;
  button: Partial<IButtonProps>
  onClose?: () => void;
  onExited?: () => void;
}

export const Banner = ({ mount, text, button, onClose, onExited }: IBannerProps) => ( 
  <CSSTransition
    classNames="banner"
    appear={mount}
    in={mount}
    timeout={300}
    unmountOnExit={true}
    {...onExited && { onExited: onExited }}
  >
    <div className="banner">
      <div className="banner__close">
        <Icon icon="x" width={12} height={12} vwidth={14} vheight={14} {...onClose && { onClick: onClose }} />
      </div>
      <span className="banner__text" dangerouslySetInnerHTML={{ __html: markdownToHtml(text) }} />
      <div className="banner__btn">
        <Button size={ButtonSize.Small} type={ButtonType.Secondary} {...button} />
      </div>
    </div>
  </CSSTransition>
)