const { useState, useEffect, useRef } = React;
/* ---------- Overlays ---------- */
function Drawer({ open, onClose, title, sub, children, footer }) {
  if (!open) return null;
  return (
    <div className="scrim" onClick={onClose}>
      <aside className="drawer" onClick={(e) => e.stopPropagation()}>
        <header className="drawer-head">
          <div>
            <div className="drawer-title display">{title}</div>
            {sub ? <div className="drawer-sub">{sub}</div> : null}
          </div>
          <button className="iconbtn" onClick={onClose} aria-label={T("common.close")}><Icon name="x" size={17} /></button>
        </header>
        <div className="drawer-body">{children}</div>
        {footer ? <footer className="drawer-foot">{footer}</footer> : null}
      </aside>
    </div>
  );
}

function Modal({ open, onClose, title, sub, children, footer, width, z, height }) {
  if (!open) return null;
  const style = { width: width || 480 };
  if (height) style.height = height;
  return (
    <div className="scrim center" style={z ? { zIndex: z } : undefined} onClick={onClose}>
      <div className={"modal" + (height ? " modal-fixed" : "")} style={style} onClick={(e) => e.stopPropagation()}>
        <header className="drawer-head">
          <div>
            <div className="drawer-title display">{title}</div>
            {sub ? <div className="drawer-sub">{sub}</div> : null}
          </div>
          <button className="iconbtn" onClick={onClose} aria-label={T("common.close")}><Icon name="x" size={17} /></button>
        </header>
        <div className="drawer-body">{children}</div>
        {footer ? <footer className="drawer-foot">{footer}</footer> : null}
      </div>
    </div>
  );
}


Object.assign(window, { Drawer, Modal });