import { Statistic } from "antd";
import Dinero from "dinero.js";
import { useTranslation } from "react-i18next";
import CardTemplate from "./job-detail-cards.template.component";

export default function JobDetailCardsTotalsComponent({ loading, data }) {
  const { t } = useTranslation();

  return (
    <CardTemplate loading={loading} title={t("jobs.labels.cards.totals")}>
      {data.job_totals ? (
        <div className="imex-flex-row imex-flex-row__flex-space-around">
          <Statistic
            className="imex-flex-row__margin-large"
            title={t("jobs.labels.total_repairs")}
            value={Dinero(data.job_totals.totals.total_repairs).toFormat()}
          />
          <Statistic
            className="imex-flex-row__margin-large"
            title={t("jobs.fields.customerowing")}
            value={Dinero(data.job_totals.totals.custPayable.total).toFormat()}
          />
          <Statistic
            className="imex-flex-row__margin-large"
            title={t("jobs.labels.net_repairs")}
            value={Dinero(data.job_totals.totals.net_repairs).toFormat()}
          />
        </div>
      ) : (
        t("jobs.errors.nofinancial")
      )}
    </CardTemplate>
  );
}
