import { Flex } from 'antd';
import styles from './index.less';

type TotalStatisticsProps = {
  icon: string;
  title: string;
  count?: string | number;
  style?: React.CSSProperties;
};

function TotalStatistics({ icon = '', title = '', count = 0, style }: TotalStatisticsProps) {
  return (
    <div className={styles['total-statistics']} style={style}>
      <img className={styles['total-statistics__icon']} src={icon} draggable={false} alt="" />
      <Flex vertical align="center">
        <div className={styles['total-statistics__title']}>
          <span>{title}</span>
        </div>
        <div className={styles['total-statistics__count']}>{count ?? '--'}</div>
      </Flex>
    </div>
  );
}

export default TotalStatistics;
