import React from 'react';
import './Modal.css';

/**
 * Kole UI Modal（React）
 * 对齐 modal.json 契约：
 *  - size:   small(320) | default(480) | large(680)
 *  - 遮罩 rgba(0,0,0,0.45)，圆角8px，右下角操作按钮（次+主）
 * 受控：<Modal open={open} onClose={setOpen} onOk={...} />
 */
export default function Modal({
  open = false,
  title = '',
  size = 'default',                // small | default | large
  closable = true,
  maskClosable = true,
  hideFooter = false,
  cancelText = '取消',
  okText = '确定',
  onClose,
  onOk,
  footer,
  children
}) {
  if (!open) return null;

  const handleMask = (e) => {
    if (maskClosable && e.target === e.currentTarget) onClose && onClose();
  };

  return (
    <div className="kole-mask" onClick={handleMask}>
      <div className={`kole-modal kole-modal--${size}`} role="dialog" onClick={(e) => e.stopPropagation()}>
        <div className="kole-modal__header">
          <span>{title}</span>
          {closable && (
            <button className="kole-modal__close" aria-label="关闭" onClick={() => onClose && onClose()}>✕</button>
          )}
        </div>
        <div className="kole-modal__body">{children}</div>
        {!hideFooter && (
          <div className="kole-modal__footer">
            {footer || (
              <>
                <button className="btn-base btn-ghost" onClick={() => onClose && onClose()}>{cancelText}</button>
                <button className="btn-base btn-primary" onClick={() => onOk && onOk()}>{okText}</button>
              </>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

/*
用法示例：
import Modal from './Modal';
const [open, setOpen] = useState(false);

<Modal open={open} title="提示" size="default" onClose={() => setOpen(false)} onOk={handleOk}>
  对话框内容...
</Modal>
*/