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

/* 遮罩层（移动端）— 规格 §40
   浮层基座：遮罩本身是纯装饰（aria-hidden="true"），内容语义由宿主放进默认插槽并自己给 role。
   遮罩用原生 button 承载点击（button 天然可聚焦），但显式 tabIndex={-1} 让它**不进键盘序列** ——
   关闭的键盘路径由内容里的关闭按钮与 Esc 承担，靠 Tab 停在遮罩上会让读屏读到空名元素。
   受控：本端不存开合，只回传关闭意图 onClose，是否收起由宿主决定。 */
export default function Overlay({
  open = false,
  contained = false,
  tone = 'default',
  lockScroll = true,
  closeOnMask = true,
  onClose,
  children = null,
}) {
  const cls =
    'kole-m-overlay' +
    ` kole-m-overlay--${tone}` +
    (contained ? ' kole-m-overlay--contained' : '') +
    (open ? ' is-open' : '');

  return (
    <div
      className={cls}
      role="presentation"
      data-open={open ? 'true' : 'false'}
      data-lock-scroll={lockScroll ? 'true' : 'false'}
    >
      <button
        className="kole-m-overlay__scrim"
        type="button"
        aria-hidden="true"
        tabIndex={-1}
        onClick={() => {
          if (!closeOnMask) return;
          if (onClose) onClose();
        }}
      />
      <div className="kole-m-overlay__content">{children}</div>
    </div>
  );
}