import React from "react";
import { useTranslation } from "react-i18next";
import Car from "../job-damage-visual/job-damage-visual.component";
import CardTemplate from "./job-detail-cards.template.component";

export default function JobDetailCardsDamageComponent({ loading, data }) {
  const { t } = useTranslation();
  const { area_of_damage } = data;
  return (
    <CardTemplate loading={loading} title={t("jobs.labels.cards.damage")}>
      {area_of_damage ? (
        <Car
          dmg1={area_of_damage.impact1 && area_of_damage.impact1.padStart(2, "0")}
          dmg2={area_of_damage.impact2 && area_of_damage.impact2.padStart(2, "0")}
        />
      ) : (
        t("jobs.errors.nodamage")
      )}
    </CardTemplate>
  );
}