import React from "react";
import { useTranslation } from "react-i18next";
import CardTemplate from "./job-detail-cards.template.component";
import PhoneFormatter from "../../utils/PhoneFormatter";

export default function JobDetailCardsInsuranceComponent({ loading, data }) {
  const { t } = useTranslation();

  return (
    <CardTemplate loading={loading} title={t("jobs.labels.cards.insurance")}>
      {data ? (
        <span>
          <div>{data.ins_co_nm || t("general.labels.unknown")}</div>
          <div>{data.clm_no || t("general.labels.unknown")}</div>
          <div>
            {t("jobs.labels.cards.filehandler")}
            {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>
            )}
            {data.ins_ph1 ? (
              <PhoneFormatter>{data.ins_ph1}</PhoneFormatter>
            ) : null}
          </div>

          <div>
            {t("jobs.labels.cards.appraiser")}
            {data.est_ea ? (
              <a href={`mailto:${data.est_ea}`}>
                <div>{`${data.ins_ct_fn || ""} ${data.ins_ct_ln || ""}`}</div>
              </a>
            ) : (
              <div>{`${data.ins_ct_fn || ""} ${data.ins_ct_ln || ""}`}</div>
            )}
          </div>

          <div>
            {t("jobs.labels.cards.estimator")}
            {data.est_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>
            )}
            {data.est_ph1 ? (
              <PhoneFormatter>{data.est_ph1}</PhoneFormatter>
            ) : null}
          </div>
        </span>
      ) : null}
    </CardTemplate>
  );
}
