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

/* 弹出层（移动端）— 规格 §11；五个方向；遮罩点击关闭（closeOnMask=false 时不关）；
   浮层 role=dialog + aria-modal，遮罩纯装饰（aria-hidden）。 */
export default function Popup({
  placement = 'bottom',
  round = false,
  open = false,
  closeOnMask = true,
  title = '',
  onClose,
  children = null,
}) {
  const cls =
    'kole-m-popup' +
    ` kole-m-popup--${placement}` +
    (round ? ' kole-m-popup--round' : '') +
    (open ? ' is-open' : '');

  return (
    <>
      <div
        className={'kole-m-popup__mask' + (open ? ' is-open' : '')}
        aria-hidden="true"
        onClick={() => {
          if (closeOnMask && onClose) onClose();
        }}
      />
      <div className={cls} role="dialog" aria-modal="true" aria-label={title || undefined}>
        <div className="kole-m-popup__header">
          <span>{title}</span>
          <button
            className="kole-m-popup__close"
            type="button"
            aria-label={title ? `关闭${title}` : '关闭浮层'}
            onClick={() => {
              if (onClose) onClose();
            }}
          >
            ✕
          </button>
        </div>
        <div className="kole-m-popup__body">{children}</div>
      </div>
    </>
  );
}