import { ApiKeyGate } from "@/components/ApiKeyGate";
import { AppHeader } from "@/components/AppHeader";
import { RouteTransition } from "@/components/RouteTransition";
import { Sidebar, SidebarOffset } from "@/components/Sidebar";
import { PodcastWizard } from "@/components/podcast/PodcastWizard";
import { WizardModeSwitch } from "@/components/WizardModeSwitch";

export const metadata = {
  title: "New podcast",
};

/**
 * Podcast mode's intake: the same notes as a deck, but the output is a spoken
 * episode with a synced transcript (see components/podcast).
 */
export default function PodcastPage() {
  return (
    <ApiKeyGate>
      <div className="flex min-h-dvh">
        <Sidebar />
        <SidebarOffset />
        <main className="flex min-h-dvh min-w-0 flex-1 flex-col">
          <AppHeader />
          <div className="mx-auto w-full max-w-3xl flex-1 px-4 pb-tabbar lg:px-10 lg:pb-16 lg:pt-10">
            <WizardModeSwitch mode="podcast" />
            <RouteTransition>
              <PodcastWizard />
            </RouteTransition>
          </div>
        </main>
      </div>
    </ApiKeyGate>
  );
}