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

interface DualBackgroundCardProps {
  icon?: string;
  label: string;
  value: number|string;
  unit: string;
  valueColor: string;
  decimals?: number;
}

const DualBackgroundCard: React.FC<DualBackgroundCardProps> = ({
  icon,
  label,
  value,
  unit,
  valueColor,
  decimals = 2
}) => {
  return (
    <div className={styles.container}>
      <div className={styles.iconWrapper}>
        {icon && <img src={icon} className={styles.icon} alt={label} />}
      </div>
      <div className={styles.content}>
        <div className={styles.label}>{label}</div>
        <div className={styles.valueWrapper}>
          <span className={styles.value} style={{ background: valueColor, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
            {typeof value == 'string' ? value : (
              <CountUp
                end={Number(value)}
                separator=","
                decimals={decimals}
              />
            )}
          </span>
          <span className={styles.unit}>{unit}</span>
        </div>
      </div>
    </div>
  );
};

export default DualBackgroundCard; 