import React from 'react';
import classNames from 'classnames';
import CountUp from 'react-countup';
import styles from './index.less';
import bgIcon from '@/assets/images/V-2504/left-bottom-status-bg.png';

export interface DataRow {
  label: string;
  value: string | number;
  unit: string;
  status?: 'normal' | 'warning' | 'error'; // normal (default), warning (超标), error (告警)
  decimals?: number;
}

export interface StatusCardProps {
  title: string;
  iconSrc: string; 
  dataRows: DataRow[];
  isActive?: boolean;
  iconStyle?: React.CSSProperties;
  onClick?: () => void;
}

const StatusCard: React.FC<StatusCardProps> = ({
  title,
  iconSrc,
  dataRows,
  isActive = false,
  onClick,
  iconStyle,
}) => {
  return (
    <div 
      className={classNames(styles.cardContainer)}
      // className={classNames(styles.cardContainer, { [styles.active]: isActive })}
      onClick={onClick}
    >
      <div className={styles.leftSection}>
        <div className={styles.iconWrapper}>
          <img src={bgIcon}  className={styles.bgIcon} />
          <img 
            src={iconSrc} 
            alt={title} 
            className={styles.icon} 
            // style={{
            //   // 直接应用外部传入的style，因为class样式已经通过className应用
            //   ...iconStyle 
            //   iconStyle
            // }}
            style={iconStyle}
          />
        </div>
        <div className={styles.title}>{title}</div>
      </div>
      
      <div className={styles.rightSection}>
        {dataRows.map((row, index) => (
          <div key={index} className={styles.dataRow}>
            <div className={styles.label}>{row.label}</div>
            <div 
              className={classNames(styles.value, {
                [styles.warningValue]: row.status === 'warning',
                [styles.errorValue]: row.status === 'error'
              })}
            >
              {typeof row.value === 'number' ? (
                <CountUp
                  end={Number(row.value)}
                  preserveValue
                  decimals={row.decimals !== undefined ? row.decimals : (Number.isInteger(row.value) ? 0 : 2)}
                />
              ) : (
                row.value
              )}
            </div>
            <div className={styles.unit}>{row.unit}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default StatusCard; 