import { InlineMessage } from "@komi-app/components";
import { FAN_TAG_COUNT_LIMIT } from "@komi-app/fans-sdk";
import When from "@komi-app/when";
import { Link } from "react-router-dom";

const CustomTagsLimitError: React.FC<{
  errorEnabled: boolean;
  hasCrossedTagLimit: boolean;
}> = ({ errorEnabled, hasCrossedTagLimit }) => {
  return (
    <When
      value={errorEnabled && hasCrossedTagLimit}
      then={
        <InlineMessage
          type="error"
          message={
            <>
              You’ve added tags as part of your last contact upload and run out
              of your tag allowance. The maximum number of tags you can create
              is {FAN_TAG_COUNT_LIMIT}. You need to review them to finalize the
              import and be able to use them in segments.
              <Link
                to={{
                  pathname: "/admin/audience-campaigns/custom-tags-review",
                  state: { prevPath: location.pathname },
                }}
              >
                &nbsp;Review tags
              </Link>
            </>
          }
        />
      }
    />
  );
};

export default CustomTagsLimitError;
