import { InlineMessage, TalentButtonWithIcon } from "@komi-app/components";
import React from "react";
import "./ErrorMessage.scss";
import { EmailDomainState } from "../types";
import { useDnsRecordsModal } from "../Modals/DnsRecordsModal";

export const ErrorMessage = ({
  state,
}: {
  state: EmailDomainState;
}): JSX.Element => {
  if (state.status !== "issue") {
    return <></>;
  }

  const dnsRecordsModals = useDnsRecordsModal();

  return (
    <InlineMessage
      className="email-domain-setup-tile-error-message"
      type="error"
      message={
        <>
          There is an issue with your domain connection. Any ongoing campaigns
          have been stopped. Check your DNS records and make sure they are
          correct.{" "}
          <TalentButtonWithIcon
            data-testid="email-domain-setup-tile-error-message-view-records-button"
            label="View records"
            type="inline"
            onClick={() => dnsRecordsModals.open()}
          />
        </>
      }
    />
  );
};
