import { Space, Statistic } from 'antd';
import type { StatisticProps } from 'antd';
import CountUp from 'react-countup';
import styles from './index.less';

interface CenterStatsProps {
  data: Array<{
    id: number;
    type: string;
    type_desc: string;
    num: number;
    unit: string;
  }>;
}

const formatter: StatisticProps['formatter'] = (value) => (
  <CountUp end={Number(value)} separator="" decimals={2} />
//   <CountUp end={Number(value)} separator="," decimals={2} />
);

const CenterStats = ({ data }: CenterStatsProps) => {
  const totalData = data.find(item => item.type_desc === '数据总量');
  const newData = data.find(item => item.type_desc === '今日新增数量');
  
  return (
    <div className={styles.container}>
      <div className={styles.totalSection}>
        <div className={styles.totalRow}>
          <span className={styles.totalTitle}>数据总量</span>
          <Statistic value={totalData?.num || 0} formatter={formatter} />
          <span className={styles.unit}>{totalData?.unit}</span>
        </div>
        <div className={styles.newData}>
          <span className={styles.label}>今日新增</span>
          <Statistic value={newData?.num || 0} formatter={formatter} />
          <span className={styles.unit}>{newData?.unit}</span>
        </div>
      </div>

      <div className={styles.dataTypeSection}>
        <div className={styles.ellipseBg} />
        <div className={styles.circleContainer}>
          {data.slice(2, 6).map((item, index) => (
            <div key={item.id} className={styles.dataTypeItem}>
              <div className={`${styles.circle} ${styles[`circle${index + 1}`]}`}>
                <div className={styles.innerCircle}>
                  <div className={styles.valueRow}>
                    <Statistic value={item.num} formatter={formatter} />
                    <span className={styles.unit}>{item.unit}</span>
                  </div>
                  <div className={styles.label}>{item.type_desc}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default CenterStats; 