import { Button, Dialog, DialogDescription, DialogTitle, Flex } from "@radix-ui/themes";

export default function GenericConfirmationDialog({
  title, description, labelConfirm, action, children,
}: {
  title: React.ReactNode,
  description: React.ReactNode,
  labelConfirm?: string,
  action?: () => any,
  children: React.ReactNode,
}) {
  return (
    <Dialog.Root>
      <Dialog.Trigger>
        {children}
      </Dialog.Trigger>
      <Dialog.Content>
        <DialogTitle>{title}</DialogTitle>
        <DialogDescription>{description}</DialogDescription>

        <Flex gap="3" mt="4" justify="end">
          <Dialog.Close>
            <Button variant="outline">Cancel</Button>
          </Dialog.Close>
          <Dialog.Close>
            <Button variant="soft" onClick={action}>{labelConfirm ?? "Confirm"}</Button>
          </Dialog.Close>
        </Flex>
      </Dialog.Content>
    </Dialog.Root>
  );
}
