import { InlineMessage } from "@komi-app/components";
import { UseQueryResult } from "@tanstack/react-query";
import { ErrorMessage } from "components/ProfileSettings/AudiencesAndCampaigns/EmailDomainSetup/EmailDomainSetupTile/ErrorMessage";
import { EmailDomainState } from "components/ProfileSettings/AudiencesAndCampaigns/EmailDomainSetup/types";
import { Link } from "react-router-dom";

const CustomDomainError: React.FC<{
  query: UseQueryResult<EmailDomainState, unknown>;
}> = ({ query }) => {
  return (
    <>
      {query.data && query.data.status !== "verified" && (
        <ErrorMessage state={query.data} />
      )}
      {query.data && query.data.status === "empty" && (
        <InlineMessage
          type="error"
          message={
            <>
              Connect your email domain in order to be able to send campaigns to
              your audience.
              <Link to="/admin/settings/audiences-and-campaigns">
                &nbsp;Go to Settings
              </Link>
            </>
          }
        />
      )}
    </>
  );
};

export default CustomDomainError;
