import React from 'react';
import { CSSTransition } from 'react-transition-group';
import { Spinner } from 'components/ui';
import './InlineSpinner.scss';

interface Props {
  active: boolean;
  text?: string;
}

export const InlineSpinner: React.SFC<Props> = ({ active, text }) => (
  <CSSTransition in={active} timeout={300} classNames="InlineSpinner--fade">
    {/* TODO: when react-transition-group v2.3 releases, use '-done' classes instead of conditional 'active' class https://github.com/reactjs/react-transition-group/issues/274 */}
    <div className="InlineSpinner small">
      {text}
      <Spinner />
    </div>
  </CSSTransition>
);