import { useState, type ReactNode } from 'react'
import Modal from './Modal'
export type ConfirmVariant = 'danger' | 'primary'
interface ConfirmDialogProps {
open: boolean
onClose: () => void
onConfirm: () => void | Promise<void>
title: string
message: ReactNode
confirmLabel?: string
cancelLabel?: string
variant?: ConfirmVariant
}
export default function ConfirmDialog({
open,
onClose,
onConfirm,
title,
message,
confirmLabel = 'Delete',
cancelLabel = 'Cancel',
variant = 'danger',
}: ConfirmDialogProps) {
const [submitting, setSubmitting] = useState(false)
const [error, setError] = useState<string | null>(null)
const handleConfirm = async () => {
setSubmitting(true)
setError(null)
try {
await onConfirm()
onClose()
} catch (err) {
setError(err instanceof Error ? err.message : String(err))
} finally {
setSubmitting(false)
}
}
const handleClose = () => {
if (submitting) return
setError(null)
onClose()
}
return (
<Modal
open={open}
onClose={handleClose}
title={title}
size="sm"
dismissable={!submitting}
footer={
<>
<button
type="button"
className="btn btn-secondary"
onClick={handleClose}
disabled={submitting}
>
{cancelLabel}
</button>
<button
type="button"
className={`btn ${variant === 'danger' ? 'btn-danger' : 'btn-primary'}`}
onClick={handleConfirm}
disabled={submitting}
>
{submitting ? 'Working…' : confirmLabel}
</button>
</>
}
>
<div className="confirm-message">{message}</div>
{error && <div className="confirm-error" role="alert">{error}</div>}
</Modal>
)
}