import { formatNumber } from '@/utils/format';
import { Typography } from 'antd';
import classNames from 'classnames';
import styles from './index.less';

type StatisticsProps = {
  remaining?: number;
  consuming?: number;
};

function Statistics({ remaining, consuming }: StatisticsProps) {
  const items = [
    {
      title: '当前可用算力积分(分)',
      value: remaining,
    },
    {
      title: '总消耗算力积分(分)',
      value: consuming,
    },
  ];

  return (
    <div className={styles['statistics']}>
      {items.map((item, index) => (
        <div
          key={item.title}
          className={classNames(styles['statistics__item'], {
            [styles['statistics__item--border']]: index === 0,
          })}
        >
          <Typography.Paragraph
            ellipsis={{ tooltip: formatNumber(item.value) }}
            className={styles['statistics__item__value']}
          >
            {formatNumber(item.value)}
          </Typography.Paragraph>
          <span className={styles['statistics__item__title']}>{item.title}</span>
        </div>
      ))}
    </div>
  );
}

export default Statistics;
