import React from 'react';
import { Button } from 'react-bootstrap';
import Spinner from '../Spinner';
import StatusDisplay from './StatusDisplay';
import StatusTooltipOverlay from './StatusTooltipOverlay';
import styles from './StatusButton.module.css';

function StatusButton(props) {
  const { status, onClick, isProcessing } = props;

  return (
    <StatusTooltipOverlay status={status} placement="right" actionTooltip>
      {/* <span> is needed to receive the ref and trigger of StatusTooltipOverlay */}
      <span>
        <Button bsStyle="primary" onClick={onClick} disabled={isProcessing}>
          {isProcessing ? (
            <Spinner className={styles.spinner} />
          ) : (
            <StatusDisplay status={status} />
          )}
        </Button>
      </span>
    </StatusTooltipOverlay>
  );
}

export default StatusButton;
