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

import { Button, IButtonProps } from "../../components/Button";

interface IPromptProps {
  text: string;
  button: IButtonProps;
  /**
   * Use this for showing/hiding the prompt
   */
  mount: boolean;
}

export class Prompt extends React.Component<IPromptProps, {}> {
  public render() {
    return (
      <CSSTransition
        in={this.props.mount}
        timeout={400}
        classNames="prompt"
        unmountOnExit={true}
      >
        {state => {
          return (
            <div className="prompt">
              <h1>{this.props.text}</h1>
              <div className="prompt-btn">
                <Button {...this.props.button} />
              </div>
            </div>
          );
        }}
      </CSSTransition>
    )
  }
}