import React from 'react';
import { Icon } from 'antd';
import classNames from 'classnames';
import styles from './index.less';

const Trend = ({ colorful = true, flag, children, className, ...rest }) => {
  const classString = classNames(styles.trendItem, {
    [styles.trendItemGrey]: !colorful,
  }, className);
  return (
    <div
      {...rest}
      className={classString}
      title={typeof children === 'string' ? children : ''}
    >
      <span className={styles.value}>{children}</span>
      {flag && <span className={styles[flag]}><Icon type={`caret-${flag}`} /></span>}
    </div>
  );
};

export default Trend;