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

interface IStackedTextProps {
  mount: boolean;
  line1: string;
  line2: string;
}

export class StackedText extends React.Component<IStackedTextProps, {}> {
  public render() {
    return (
      <CSSTransition
        in={this.props.mount}
        timeout={500}
        classNames="stacked-text"
        unmountOnExit={true}
      >
        {state => (
          <div className="stacked-text">
            <span className="stacked-text__line stacked-text__line-1">
              {this.props.line1}
            </span>
            <span className="stacked-text__line stacked-text__line-2">
              {this.props.line2}
            </span>
          </div>
        )}
      </CSSTransition>
    )
  }
}