import {
  Button,
  Flex,
  FocusTrap,
  Modal,
  Text,
  type ModalBodyProps,
  type ModalProps,
} from "@mantine/core";
import type React from "react";
import classes from "./confirmAlert.module.css";

const ConfirmAlert: React.FC<{
  title?: string;
  titleIcon?: React.ReactNode;
  bodyProps?: ModalBodyProps;
  modalProps: ModalProps;
  message?: string;
  handleConfirm: () => void;
}> = ({ title, titleIcon, bodyProps, modalProps, message, handleConfirm }) => {
  return (
    <>
      <Modal
        centered
        radius={12}
        title={
          title ? (
            <Flex align={"center"} gap={10}>
              {titleIcon && titleIcon}
              <Text fz={16} fw={500} c={"dark.10"}>
                {title}
              </Text>
            </Flex>
          ) : (
            ""
          )
        }
        bg={"white.0"}
        py={21}
        px={24}
        classNames={{ header: classes.header }}
        {...modalProps}
      >
        <FocusTrap.InitialFocus />
        <Modal.Body {...bodyProps}>
          <Text fz={14} c={"blue.18"}>
            {message}
          </Text>
          <Flex align={"center"} gap={12} mt={12}>
            <Button
              variant="transparent"
              fz={14}
              c={"dark.11"}
              onClick={handleConfirm}
              px={0}
            >
              Continue
            </Button>
            <Button
              variant="transparent"
              fz={14}
              c={"blue.18"}
              onClick={modalProps.onClose}
              px={0}
            >
              Dismiss
            </Button>
          </Flex>
        </Modal.Body>
      </Modal>
    </>
  );
};

export default ConfirmAlert;