import React from "react";
import { useTranslation } from "react-i18next";
import DataLabel from "../data-label/data-label.component";
import CardTemplate from "./job-detail-cards.template.component";
export default function JobDetailCardsInsuranceComponent({ loading, data }) {
  const { t } = useTranslation();

  return (
    <CardTemplate loading={loading} title={t("jobs.labels.cards.insurance")}>
      {data ? (
        <span>
          <DataLabel label={t("jobs.fields.ins_co_nm")} hideIfNull>
            {data.ins_co_nm}
          </DataLabel>
          <DataLabel label={t("jobs.fields.clm_no")} hideIfNull>
            {data.clm_no}
          </DataLabel>
          <DataLabel
            label={t("jobs.labels.cards.filehandler")}
            visible={data.ins_ct_fn && data.ins_ct_ln}>
            {data.ins_ea ? (
              <a href={`mailto:${data.ins_ea}`}>
                <div>{`${data.ins_ct_fn || ""} ${data.ins_ct_ln || ""}`}</div>
              </a>
            ) : (
              <div>{`${data.ins_ct_fn || ""} ${data.ins_ct_ln || ""}`}</div>
            )}
          </DataLabel>
          <DataLabel
            label={t("jobs.labels.cards.estimator")}
            visible={data.est_ct_fn && data.est_ct_ln}>
            {data.ins_ea ? (
              <a href={`mailto:${data.est_ea}`}>
                <div>{`${data.est_ct_fn || ""} ${data.est_ct_ln || ""}`}</div>
              </a>
            ) : (
              <div>{`${data.est_ct_fn || ""} ${data.est_ct_ln || ""}`}</div>
            )}
          </DataLabel>
        </span>
      ) : null}
    </CardTemplate>
  );
}