import {
  Modal,
  ModalBody,
  ModalContent,
  ModalHeader,
  Button,
} from "@nextui-org/react";

type SubmitSurveyErrorModalProps = {
  isOpen: boolean;
  oppTitle: string;
  onClose: () => void;
};

function SubmitSurveyErrorModal({
  isOpen,
  oppTitle,
  onClose,
}: SubmitSurveyErrorModalProps) {
  return (
    <Modal
      isKeyboardDismissDisabled
      backdrop="blur"
      isDismissable={false}
      isOpen={isOpen}
      size="lg"
      onClose={onClose}
    >
      <ModalContent className="p-4 flex flex-col items-center">
        <ModalHeader>
          <h4 className="inline-flex font-inter items-center font-black text-xl tracking-tight text-red-600 dark:text-red-400">
            Submission error
          </h4>
        </ModalHeader>
        <ModalBody className="flex flex-col items-center justify-center text-center space-y-4">
          <p>
            Something went wrong while submitting your survey for
            <span className="font-semibold"> {oppTitle}</span>.
          </p>
          <p className="text-sm text-default-500">
            Please check your internet connection or try again later.
          </p>
          <Button color="danger" variant="flat" onPress={onClose}>
            Close
          </Button>
        </ModalBody>
      </ModalContent>
    </Modal>
  );
}

export default SubmitSurveyErrorModal;