import React from 'react';
import CountUp from 'react-countup';
import classNames from 'classnames';
import styles from './index.less';

interface DataItemProps {
  title: string;
  value: number;
  unit: string;
  logoSrc: string;
  active?: boolean; // 是否为激活状态，决定样式
  onClick?: () => void; // 添加点击处理函数
  decimals?: number; // 小数位数
}

const DataItem: React.FC<DataItemProps> = ({ 
  title, 
  value, 
  unit, 
  logoSrc,
  active = false,
  onClick,
  decimals = 2
}) => {
  return (
    <div 
      className={classNames(styles.itemContainer)}
      // className={classNames(styles.itemContainer, { [styles.active]: active })}
      onClick={onClick}
    >
      <div className={styles.leftRectangle}>
        <img src={logoSrc} className={styles.logo} alt={title} />
      </div>
      
      <div className={styles.content}>
        <div className={styles.title}>{title}</div>
        <div className={styles.dataRow}>
          <span className={styles.value}>
            <CountUp end={value} preserveValue duration={1} separator="," decimals={decimals} />
          </span>
          <span className={styles.unit}>{unit}</span>
        </div>
      </div>
    </div>
  );
};

export default DataItem; 