import { Card, Statistic } from "antd";
import Dinero from "dinero.js";
import { useTranslation } from "react-i18next";
import DashboardRefreshRequired from "../refresh-required.component";

export default function DashboardTotalProductionDollars({ data, ...cardProps }) {
  const { t } = useTranslation();
  if (!data) return null;
  if (!data.production_jobs) return <DashboardRefreshRequired {...cardProps} />;
  const dollars =
    data.production_jobs &&
    data.production_jobs.reduce(
      (acc, val) => acc.add(Dinero(val.job_totals && val.job_totals.totals.subtotal)),
      Dinero()
    );

  return (
    <Card title={t("dashboard.labels.dollarsinproduction")} {...cardProps}>
      <Statistic value={dollars.toFormat()} />
    </Card>
  );
}
