import { Suspense } from "react";

import { ApiKeyGate } from "@/components/ApiKeyGate";
import { AppHeader } from "@/components/AppHeader";
import { Sidebar, SidebarOffset } from "@/components/Sidebar";
import { TeachScreen } from "@/components/teach/TeachScreen";

export const metadata = {
  title: "Teach it back",
};

/**
 * Teach it back. Phones get a full-screen session (the tab bar steps aside,
 * see TabBar); desktop keeps the sidebar. The hidden AppHeader is only there
 * to mount the settings dialog the sidebar opens.
 */
export default function TeachPage() {
  return (
    <ApiKeyGate>
      <div className="flex min-h-dvh">
        <Sidebar />
        <SidebarOffset />
        <main className="flex h-dvh min-h-dvh min-w-0 flex-1 flex-col">
          <AppHeader className="hidden" />
          <Suspense fallback={null}>
            <TeachScreen />
          </Suspense>
        </main>
      </div>
    </ApiKeyGate>
  );
}