import classNames from 'classnames';
import { CSSProperties } from 'react';
import CountUp, { CountUpProps } from 'react-countup';
import styles from './index.less';
interface CountNumProps extends Omit<CountUpProps, 'end'> {
  value?: string | number;
  valueStyle?: CSSProperties;
  unitStyle?: CSSProperties; //单位样式
  isBorderLine?: 'line' | 'noLine'; //是否有下划线
  unit?: string;
  style?: CSSProperties; //容器样式
}
const CountNum = (props: CountNumProps) => {
  const {
    value,
    valueStyle,
    isBorderLine = 'noLine',
    unit,
    unitStyle,
    style,
  } = props;
  return (
    <div className={styles.count_wrap} style={{ ...style }}>
      <CountUp
        className={classNames(styles.num, styles[isBorderLine])}
        style={{ ...valueStyle }}
        end={typeof value === 'string' ? Number(value) : value ?? 0}
        delay={0.4}
      />
      {unit && (
        <span className={styles.unit} style={{ ...unitStyle }}>
          {unit}
        </span>
      )}
    </div>
  );
};
export default CountNum;
