import { Meta } from '@storybook/addon-docs'

<Meta title="@baseapp-frontend | designSystem/Dialogs/ConfirmDialog" />

# Component Documentation

## ConfirmDialog

- **Purpose**: A dialog component that prompts users to confirm or cancel an action, providing a clear decision point before proceeding with important operations.
- **Expected Behavior**: Opens as a modal dialog with a message, title, and two action buttons (confirm and cancel). Blocks interaction with the main content until a choice is made.

## Use Cases

- **Current Usage**:
  - Delete confirmation dialogs
  - Save changes confirmations
  - Logout confirmations
  - Form submission confirmations
- **Potential Usage**:
  - Bulk action confirmations
  - Settings changes verification
  - Account modifications
  - Data export confirmations

## Props

- **open** (boolean): Controls the visibility of the dialog
- **title** (string): The heading text displayed at the top of the dialog
- **content** (ReactNode): The main message or content displayed in the dialog body
- **cancelText** (string): Custom text for the cancel button (optional, defaults to "Cancel")
- **onClose** (function): Callback function executed when the cancel button is clicked
- **action** (ReactNode): The action button to be displayed in the dialog

## Notes

- **Related Components**:
  - Dialog: Base dialog component
  - AlertDialog: For displaying important messages
  - Modal: For more complex modal interactions
  - Button: Used within the dialog for actions

## Example Usage

```javascript
import { ConfirmDialog, Button } from '@baseapp-frontend/design-system/web'

const MyComponent = () => {
  const [open, setOpen] = useState(false)

  const handleClickOpen = () => {
    setOpen(true)
  }

  const handleClose = () => {
    setOpen(false)
  }

  const handleConfirm = () => {
    alert('Confirmed')
    handleClose()
  }

  return (
    <>
      <Button onClick={handleClickOpen}>Open Confirm Dialog</Button>
      <ConfirmDialog
        open={open}
        title="Are you sure?"
        content="This action cannot be undone."
        onClose={handleClose}
        action={<Button onClick={handleConfirm}>Confirm</Button>}
      />
    </>
  )
}
export default MyComponent
```