/**
 * Dialog — styled modal that replaces window.confirm() and window.alert().
 * Used via the useDialog() hook. Matches the Suspend Quiz popup style.
 *
 * Props:
 *   open         — boolean
 *   title        — string (optional)
 *   message      — string
 *   confirmLabel — string (default "OK")
 *   cancelLabel  — string | null  (null = no cancel button → alert mode)
 *   onConfirm    — () => void
 *   onCancel     — () => void
 *   danger       — boolean (makes confirm button red)
 */
export default function Dialog({ open, title, message, confirmLabel = 'OK', cancelLabel = null, onConfirm, onCancel, danger = false }) {
  if (!open) return null

  return (
    <div
      style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
      onClick={e => { if (e.target === e.currentTarget && onCancel) onCancel() }}
    >
      <div style={{ background: 'var(--card-bg)', borderRadius: 14, padding: 28, maxWidth: 420, width: '100%', textAlign: 'center', boxShadow: '0 20px 60px rgba(0,0,0,0.3)' }}>
        {title && <h2 style={{ marginBottom: 10, fontSize: '1.1rem' }}>{title}</h2>}
        <p style={{ color: 'var(--text-muted)', fontSize: '0.9rem', marginBottom: 22, lineHeight: 1.5 }}>{message}</p>
        <div style={{ display: 'flex', gap: 10, justifyContent: 'center' }}>
          {cancelLabel && (
            <button className="btn btn-secondary" onClick={onCancel}>{cancelLabel}</button>
          )}
          <button
            className={`btn ${danger ? 'btn-danger' : 'btn-primary'}`}
            onClick={onConfirm}
            autoFocus
          >
            {confirmLabel}
          </button>
        </div>
      </div>
    </div>
  )
}
