export function OpsShell({ activeView, children, onViewChange, views }) {
  return (
    <div className="ops-shell">
      <aside className="ops-sidebar" aria-label="运营中心导航">
        <div className="ops-brand">
          <span>OP</span>
          <div>
            <strong>运营中心</strong>
            <small>Ops Center</small>
          </div>
        </div>
        <nav aria-label="运营中心导航" className="ops-nav">
          {views.map((view) => {
            const Icon = view.icon;
            return (
              <button
                aria-current={activeView === view.key ? "page" : undefined}
                className={activeView === view.key ? "is-active" : ""}
                key={view.key}
                onClick={() => onViewChange(view.key)}
                type="button"
              >
                <Icon fontSize="small" />
                {view.label}
              </button>
            );
          })}
        </nav>
      </aside>
      <main className="ops-main">{children}</main>
    </div>
  );
}