import { Typography } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import JobCostingPartsTable from "../job-costing-parts-table/job-costing-parts-table.component";
import JobCostingStatistics from "../job-costing-statistics/job-costing-statistics.component";
import JobCostingPie from "./job-costing-modal.pie.component";

export default function JobCostingModalComponent({
  summaryData,
  costCenterData,
}) {
  const { t } = useTranslation();

  return (
    <div>
      <JobCostingStatistics summaryData={summaryData} />
      <JobCostingPartsTable data={costCenterData} summaryData={summaryData} />
      <div className="imex-flex-row">
        <div style={{ flex: 1 }}>
          <Typography.Title level={4}>
            {t("jobs.labels.sales")}
          </Typography.Title>
          <JobCostingPie type="sales" costCenterData={costCenterData} />
        </div>
        <div style={{ flex: 1 }}>
          <Typography.Title level={4}>{t("jobs.labels.cost")}</Typography.Title>
          <JobCostingPie type="cost" costCenterData={costCenterData} />
        </div>
      </div>
    </div>
  );
}