import React from 'react';
import { Icon as LegacyIcon } from '@ant-design/compatible';
import classNames from 'classnames';
import styles from './index.less';

export default ({
  theme, title, subTitle, total, subTotal, status, suffix, gap, ...rest
}) => (
  <div
    className={
      classNames(styles.numberInfo, {
        [styles[`numberInfo${theme}`]]: theme,
      })
    }
    {...rest}
  >
    {title && <div className={styles.numberInfoTitle}>{title}</div>}
    {subTitle && <div className={styles.numberInfoSubTitle}>{subTitle}</div>}
    <div className={styles.numberInfoValue} style={gap ? { marginTop: gap } : null}>
      <span>
        {total}
        {suffix && <em className={styles.suffix}>{suffix}</em>}
      </span>
      {
        (status || subTotal) && (
          <span className={styles.subTotal}>
            {subTotal}
            {status && <LegacyIcon type={`caret-${status}`} />}
          </span>
        )
      }
    </div>
  </div>
);