import {Statistic} from "antd";
import Dinero from "dinero.js";
import React from "react";
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.ded_amt")}
                        value={Dinero({
                            amount: Math.round((data.ded_amt || 0) * 100),
                        }).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>
    );
}