Confirmation Modal

Create a React modal component that displays a confirmation prompt to the user with options to either confirm or cancel an action.

Requirements

• A button labeled "Open Confirmation Modal" triggers the modal.
• Upon clicking the button:
  • A modal appears.
  • The modal includes:
    • A title "Confirm Action"
    • A message "Are you sure you want to proceed?"
    • Two buttons: "Confirm" and "Cancel"
• On clicking "Confirm":
  • The modal should close.
  • A status message below appears: "Confirmed"
• On clicking "Cancel":
  • The modal should close.
  • A status message below appears: "Cancelled"

Edge Cases & Constraints

• Modal should only be visible after the open button is clicked.
• Status messages should update appropriately based on user action.
• Ensure that only one modal appears at a time.

Data Test IDs (required for testing):

• data-testid="open-modal-button": Button to open the modal
• data-testid="confirmation-modal": The modal container box
• data-testid="modal-title": Title inside the modal
• data-testid="modal-message": Message text inside the modal
• data-testid="confirm-button": Confirm action button
• data-testid="cancel-button": Cancel action button
• data-testid="action-status": Text showing the result of the user’s action

Reference UI