text: // @flow
  import * as React from 'react';
  import classnames from 'classnames';
  import Tooltip from '../tooltip';
  
  type Props = {
    milliseconds: number,
  
    // Optional
    small?: boolean,
    className?: string,
  };
  
  class TimeTag extends React.PureComponent<Props> {
    render() {
      const { milliseconds, small, className } = this.props;
  
      let unit = 'ms';
      let number = milliseconds;
  
      if (milliseconds > 1000 * 60) {
        unit = 'm';
        number = milliseconds / 1000 / 60;
      } else if (milliseconds > 1000) {
        unit = 's';
        number = milliseconds / 1000;
      }
  
      // Round to 0, 1, 2 decimal places depending on how big the number is
      if (number > 100) {
        number = Math.round(number);
      } else if (number > 10) {
        number = Math.round(number * 10) / 10;
      } else {
        number = Math.round(number * 100) / 100;
      }
  
      let description = `${milliseconds.toFixed(3)} milliseconds`;
      return (
        <div className={classnames('tag', { 'tag--small': small }, className)}>
          <Tooltip message={description} position="bottom">
            <strong>TIME</strong> {number} {unit}
          </Tooltip>
        </div>
      );
    }
  }
  
  export default TimeTag;
  