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';
  decimals?: number;
  reverseName?: boolean;
  onClick?: () => void;
}

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

  const ValueAndUnit = (
    <Space align="center" size="small">
      <CountUp
        className={styles.value}
        end={Number(value)}
        style={valueStyle}
        preserveValue
        decimals={decimals}
      />
      <div className={styles.unit} style={unitStyle}>
        {unit}
      </div>
    </Space>
  );

  const Label = (
    <div className={styles.label} style={labelStyle}>
      {name}
    </div>
  );

  return (
    <div
      className={
        direction === 'vertical' ? styles.verticalWrap : styles.horizontalWrap
      }
      onClick={onClick}
      style={{ ...style, cursor: onClick ? 'pointer' : 'default' }}
    >
      {reverseName ? (
        <>
          {Label}
          {ValueAndUnit}
        </>
      ) : (
        <>
          {ValueAndUnit}
          {Label}
        </>
      )}
    </div>
  );
};

export default DescriptionItem;
