() => {
    const { isOpen, onOpen, onClose } = useDisclosure()
    const cancelRef = React.useRef()

    return (
        <div>
            <Button colorScheme="danger" onClick={onOpen}>
                Open Alert Dialog
            </Button>
            <AlertDialog
                isOpen={isOpen}
                onClose={onClose}
                leastDestructiveRef={cancelRef}
            >
                <AlertDialogOverlay />
                <AlertDialogContent>
                    <AlertDialogHeader>Discard changes?</AlertDialogHeader>
                    <AlertDialogBody>
                        Discard unsaved changes and close?
                    </AlertDialogBody>
                    <AlertDialogFooter>
                        <Button
                            variant="ghost"
                            ref={cancelRef}
                            onClick={onClose}
                        >
                            Keep editing
                        </Button>
                        <Button colorScheme="danger" onClick={onClose}>
                            Discard
                        </Button>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>
        </div>
    )
}