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';
import {useContextSection} from '@hooks';
import {context} from '../context';

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

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 () {
  const {unarrivedQuantity, totalQuantity, quantityArrived, timeoutQuantity} =
    useContextSection(context, function ([data]) {
      return {
        unarrivedQuantity: data?.unarrivedQuantity ?? 0,
        totalQuantity: data?.totalQuantity ?? 0,
        quantityArrived: data?.quantityArrived ?? 0,
        timeoutQuantity: data?.timeoutQuantity ?? 0,
      };
    });
  return (
    <div className={css.group}>
      <Item img={nav1Icon} title='当日收货量' content={totalQuantity} />
      <Item img={nav2Icon} title='已收货数量' content={quantityArrived} />
      <Item img={nav3Icon} title='未收货数量' content={unarrivedQuantity} />
      <Item img={nav4Icon} title='超时未送达数量' content={timeoutQuantity} />
    </div>
  );
};

export default Group;
