import { Box, Button, Group, Modal, Text } from "@mantine/core";
import { useState } from "react";
const DialogConfirm = ({
  opened,
  close,
  message,
  handle,
}: {
  opened: boolean;
  close: () => void;
  message: string;
  handle: () => void;
  centered?: boolean;
  bottom?: boolean;
}) => {
  const [disableBtn, setDisableBtn] = useState(false);
  return (
    <Box>
      <Modal
        style={{ position: "absolute", left: 0, border: "solid 2px #ff6c6b" }}
        title="Confirm"
        opened={opened}
        centered
        withCloseButton
        shadow="md"
        onClose={close}
        size="xs"
        radius="md"
      >
        <Text
          size="sm"
          mb={"xl"}
          fw={700}
          c={"#ff6c6b"}
          style={{ textAlign: "center", fontSize: "18px" }}
        >
          {message}
        </Text>

        <Group style={{ display: "flex", justifyContent: "center" }}>
          <Button
            variant="gradient"
            gradient={{ from: "pink", to: "red", deg: 90 }}
            size="xs"
            disabled={disableBtn}
            onClick={async () => {
              setDisableBtn(true);
              await handle();
              setDisableBtn(false);
              close();
            }}
          >
            Yes
          </Button>

          <Button
            variant="gradient"
            size="xs"
            onClick={async () => {
              close();
            }}
          >
            No
          </Button>
        </Group>
      </Modal>
    </Box>
  );
};

export default DialogConfirm;