import {
  Modal,
  ModalBody,
  ModalContent,
  ModalFooter,
  ModalHeader,
} from "@nextui-org/react";
import Link from "next/link";

import { SUPPORT_EMAIL } from "@/constants/signup-form-constants";
import Button from "@/components/common/button";

type ExclusiveToClientModalProps = {
  isOpen: boolean;
  onClose: () => void;
};

function ExclusiveToClientModal({
  isOpen,
  onClose,
}: ExclusiveToClientModalProps) {
  return (
    <Modal
      isKeyboardDismissDisabled
      backdrop="blur"
      isDismissable={false}
      isOpen={isOpen}
      size="lg"
      onClose={onClose}
    >
      <ModalContent className="p-4 flex flex-col">
        <ModalHeader>
          <h4 className="inline-flex font-inter items-center font-black text-xl tracking-tight">
            Temporary application restriction
          </h4>
        </ModalHeader>
        <ModalBody>
          <p>
            You are temporarily unable to apply to opportunities on our website
            because you agreed to exclusively participate in a panel or ongoing
            research with one of our clients. Once this panel/ongoing research
            ends, your account will be restored to its full access and you will
            be able to apply to other studies.{" "}
          </p>
          <p>
            For now, you can still refer friends and family to apply by copying
            this opportunity&apos;s link and sharing it with them. If you wish
            to be removed from the panel, please contact us at{" "}
            <Link
              className="underline underline-offset-2 decoration-dotted cursor-pointer font-semibold"
              href={`mailto:${SUPPORT_EMAIL}`}
            >
              our support email
            </Link>
            .
          </p>
        </ModalBody>
        <ModalFooter>
          <Button fullWidth customVariant="primary" onClick={onClose}>
            Close
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
}

export default ExclusiveToClientModal;