import css from './index.module.css';
import {Card, Col} from 'antd';
import {FC, ReactNode} from 'react';

type Props = {
  title: string;
  content: string | number | null;
  icon: ReactNode;
};

const GroupItem: FC<Props> = function ({title, content, icon}) {
  return (
    <Col span={6} className={css.cardWrapper}>
      <Card
        title={
          <div className={css.cardTitle}>
            {icon}
            <span>{title}</span>
          </div>
        }
        className={css.card}
      >
        <p className={css.cardContent}>{content ?? '0'}</p>
      </Card>
    </Col>
  );
};

export default GroupItem;
