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>
  );
}