import { ServerConfigForm } from './server/ServerConfigForm';
import { ProjectManagement } from './server/ProjectManagement';

/**
 * Administration → Server Management. Two regions: the serverconfig.conf editor
 * and the project/invite-code manager. The container query in components.css
 * lays them out stacked (tall) or side-by-side (wide).
 */
export function ServerManagementPanel() {
  return (
    <div className="server-mgmt-container">
      <section className="server-mgmt-region server-mgmt-region--config">
        <ServerConfigForm />
      </section>
      <hr className="server-mgmt-divider" />
      <section className="server-mgmt-region server-mgmt-region--projects">
        <ProjectManagement />
      </section>
    </div>
  );
}
