import { Space } from 'antd';
import React, { CSSProperties } from 'react';
import CountUp from 'react-countup';
import styles from './index.less';

interface DescriptionItemProps {
  value: any;
  name: string;
  unit: string;
  valueStyle?: CSSProperties;
  unitStyle?: CSSProperties;
  labelStyle?: CSSProperties;
  style?: CSSProperties;
  direction?: 'vertical' | 'horizontal';
}

const DescriptionItem: React.FC<DescriptionItemProps> = (props) => {
  const {
    value,
    name,
    unit,
    valueStyle = {},
    unitStyle = {},
    labelStyle = {},
    style = {},
    direction = 'vertical',
  } = props;

  return (
    <div
      className={
        direction === 'vertical' ? styles.verticalWrap : styles.horizontalWrap
      }
      style={style}
    >
      <Space align="center" size="small">
        <CountUp
          className={styles.value}
          end={Number(value)}
          style={valueStyle}
          preserveValue
        ></CountUp>

        <div className={styles.unit} style={unitStyle}>
          {unit}
        </div>
      </Space>
      <div className={styles.label} style={labelStyle}>
        {name}
      </div>
    </div>
  );
};

export default DescriptionItem;
