import React from "react";
import CollectionInfoCard from "./CollectionInfoCard";
import { useTranslation } from "react-i18next";
import { useGetSummery } from "../../../../api/sales";
import { Spin } from "antd";

const CollectionsCards = () => {
  const { t } = useTranslation();
  const { data, isLoading } = useGetSummery();

  return (
    <>
      <CollectionInfoCard
        label={t("total_sells")}
        isLoading={isLoading}
        value={data?.data?.total_sells}
      />
      <CollectionInfoCard
        label={t("reseller_profit")}
        isLoading={isLoading}
        value={data?.data?.reseller_profit}
      />
      <CollectionInfoCard
        label={t("company_profit")}
        isLoading={isLoading}
        value={data?.data?.dues}
      />
      <CollectionInfoCard
        label={t("collected")}
        isLoading={isLoading}
        value={data?.data?.collected_amount}
      />
      <CollectionInfoCard
        label={t("residual")}
        isLoading={isLoading}
        value={data?.data?.remaining_amount}
      />
    </>
  );
};

export default CollectionsCards;
