import { AuthTicketIcon, SceneDecor } from "./AuthDecor";
import { ThemeToggle } from "./ThemeToggle";

export function AuthShell({ children }: { children: React.ReactNode }) {
  return (
    <div className="hx-scene">
      <SceneDecor />
      <div style={{ position: "fixed", top: "1rem", right: "1rem", zIndex: 2 }}>
        <ThemeToggle />
      </div>
      <main className="auth-page">
        <section className="auth-ticket auth-shell-form">
          <div className="auth-welcome">
            <AuthTicketIcon />
            <div>
              <h1 style={{ margin: 0 }}>巡樓 Console</h1>
              <p className="muted" style={{ margin: "0.2rem 0 0" }}>把找題、寫文、排程、追成效串成一條線。</p>
            </div>
          </div>
          {children}
        </section>
      </main>
    </div>
  );
}
