import React, { useState } from 'react';
import './ConfirmModal.css';

export default function ConfirmModal({
  visible = false, title = '确认操作', content = '', confirmType = 'danger',
  confirmText = '确定', cancelText = '取消', loading = false, dontAsk = false,
  onConfirm, onCancel
}) {
  const [checked, setChecked] = useState(false);
  if (!visible) return null;
  return (
    <div className="aa-modal-mask" onClick={e => { if (e.target === e.currentTarget) onCancel && onCancel(); }}>
      <div className={`aa-confirm ${confirmType === 'danger' ? 'is-danger' : 'is-primary'}`}>
        <div className="aa-confirm-head">
          <span className="aa-confirm-icon">!</span>
          <div className="aa-confirm-title">{title}</div>
        </div>
        <div className="aa-confirm-content">{content}</div>
        {dontAsk ? (
          <label className="aa-confirm-extra">
            <input type="checkbox" checked={checked} onChange={e => setChecked(e.target.checked)} /> 不再提示
          </label>
        ) : null}
        <div className="aa-confirm-footer">
          <button className="aa-confirm-btn" disabled={loading} onClick={onCancel}>{cancelText}</button>
          <button
            className={`aa-confirm-btn ${confirmType === 'danger' ? 'danger' : 'primary'}`}
            disabled={loading}
            onClick={() => onConfirm && onConfirm(checked)}
          >
            {loading ? '处理中…' : confirmText}
          </button>
        </div>
      </div>
    </div>
  );
}