import css from './index.module.css';
import {FC} from 'react';
import nav1Icon from '@assets/images/screen/group/nav1.webp';
import nav2Icon from '@assets/images/screen/group/nav2.webp';
import nav3Icon from '@assets/images/screen/group/nav3.webp';
import nav4Icon from '@assets/images/screen/group/nav4.webp';

type Props = {
  img: string;
  title: string;
  content: string;
};

const Item: FC<Props> = function ({img, title, content}) {
  return (
    <div className={css.item}>
      <h2 className={css.itemTitle}>
        <img src={img} />
        <p>{title}</p>
      </h2>

      <div className={css.itemContent}>
        <p>{content}</p>
      </div>
    </div>
  );
};

const Group: FC = function () {
  return (
    <div className={css.group}>
      <Item img={nav1Icon} title='当日收货量' content='1000' />
      <Item img={nav2Icon} title='已收货数量' content='198312' />
      <Item img={nav3Icon} title='未收货数量' content='9843123' />
      <Item img={nav4Icon} title='超时未送达数量' content='93123' />
    </div>
  );
};

export default Group;
