import React from "react";
import { useDisclosure } from "@mantine/hooks";

import { Button, Modal, Text, Flex } from "@mantine/core";

export const ConfirmDialogButton: React.FC<{
  text: string;
  buttonText: string;
  buttonColor: string;
  onConfirm: () => void;
  children: React.ReactNode;
}> = ({ text, buttonText, buttonColor, onConfirm, children }) => {
  const [opened, { open, close }] = useDisclosure();

  const handleConfirm = React.useCallback(() => {
    close();
    onConfirm();
  }, [close, onConfirm]);

  return (
    <>
      <Modal opened={opened} onClose={close} p="sm" withCloseButton={false}>
        <Text mb="xl">{text}</Text>
        <Flex gap="md" justify="flex-end">
          <Button onClick={close}>Cancel</Button>
          <Button color={buttonColor} onClick={handleConfirm}>
            {buttonText}
          </Button>
        </Flex>
      </Modal>
      <Button color={buttonColor} onClick={open}>
        {children}
      </Button>
    </>
  );
};