Dialog with Actions (Cancel/Confirm)

Note: This challenge focuses more on logic than UI. If you want to also focus on and practice UI, visit our UI Components challenges.

Objective: Implement an alert dialog that displays a message and provides "Cancel" and "Confirm" buttons for user interaction.

Instructions:

1. Create a component that displays an alert dialog with a message.
2. Include two actions in the dialog: "Cancel" and "Confirm".
3. The "Cancel" action should close the dialog without any further action.
4. The "Confirm" action should trigger a specified function and then close the dialog.

Requirements:

• The dialog should be a modal, meaning it blocks interaction with the rest of the page until the user takes an action.
• The component should handle both "Cancel" and "Confirm" actions appropriately.

Hints:

1. Use a arguments/props to control the visibility of the dialog.
2. Ensure the dialog is positioned and styled to be centered on the screen.
3. Use event listeners to close the dialog when clicking outside of it or pressing the "Escape" key.