function ShopShell({ title, children, tab, setTab, theme, onToggleTheme, hideTopbar, hideTabbar }) {
  const isDark = theme === "dark";
  return (
    <div className="phone-wrap">
      <div className="stage-label">{title}</div>
      <div className="phone" data-theme={isDark ? "dark" : "light"}>
        <div className="notch"></div>
        <div className="status">
          <span>21:30</span>
          <div className="right">
            <i className="ti ti-signal-5g" style={{fontSize:14}}></i>
            <i className="ti ti-wifi" style={{fontSize:14}}></i>
            <i className="ti ti-battery-3" style={{fontSize:14}}></i>
          </div>
        </div>
        <div className="viewport">
          {!hideTopbar && (
            <div className="shop-topbar">
              <a className="ic" href="../../index.html" target="_top" title="返回首页" style={{color:"inherit", textDecoration:"none"}}>
                <i className="ti ti-home"></i>
              </a>
              <div className="searchbox">
                <i className="ti ti-search" style={{color:"var(--on-surface-variant)"}}></i>
                <span>泰国香米 · 美妆 · 茶</span>
              </div>
              <div className="ic" onClick={onToggleTheme}><i className={"ti " + (isDark ? "ti-sun" : "ti-moon")}></i></div>
              <div className="ic alert"><i className="ti ti-bell-filled"></i></div>
            </div>
          )}
          <div className="scroll">{children}</div>
          {!hideTabbar && (
            <div className="bottombar">
              {[
                { id: "home",  icon: "ti-home-filled",        label: "首页" },
                { id: "cat",   icon: "ti-category-filled",    label: "分类" },
                { id: "live",  icon: "ti-broadcast",          label: "直播" },
                { id: "cart",  icon: "ti-shopping-cart-filled",label:"购物车" },
                { id: "me",    icon: "ti-user-filled",        label: "我的" },
              ].map(b => (
                <div key={b.id} className={"tab" + (tab===b.id ? " active":"")} onClick={() => setTab(b.id)}>
                  <i className={"ti " + b.icon}></i>
                  <span>{b.label}</span>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

window.ShopShell = ShopShell;