import {FC} from 'react';
import GroupItem from './Item';
import {Row} from 'antd';
import {useQueryData} from './hooks';
import errorIcon from '@assets/images/main/error.svg';
import deadIcon from '@assets/images/main/dead.svg';
import waitIcon from '@assets/images/main/wait.svg';
import warningIcon from '@assets/images/main/warning.svg';

const Group: FC = function () {
  const {
    deadStockAmount,
    earlyWarningAmount,
    ErrorListAmount,
    unarrivedQuantity,
  } = useQueryData();

  return (
    <Row gutter={12}>
      <GroupItem
        title='错误日志数量'
        content={ErrorListAmount}
        icon={<img src={errorIcon} />}
      />
      <GroupItem
        title='呆滞品数量'
        content={deadStockAmount}
        icon={<img src={deadIcon} />}
      />
      <GroupItem
        title='存储预警数量'
        content={earlyWarningAmount}
        icon={<img src={warningIcon} />}
      />
      <GroupItem
        title='待收货数量'
        content={unarrivedQuantity}
        icon={<img src={waitIcon} />}
      />
    </Row>
  );
};

export default Group;
