"use client";

import { usePathname } from "next/navigation";
import type { ReactNode } from "react";

import { isCinematicRoute } from "@/lib/route-chrome";
import { cn } from "@/lib/utils";

/**
 * The page `<main>`.
 *
 * The bottom padding exists only to clear the floating navigation bar, which is
 * fixed to the bottom of the viewport on every screen size. Cinematic routes
 * render no navigation, so the padding would leave a band of dead space under
 * the player — hence the conditional.
 *
 * `usePathname()` is available during SSR, so the first paint already has the
 * right spacing and nothing shifts after hydration.
 */
export function MainShell({ children }: { children: ReactNode }) {
  const pathname = usePathname();
  const cinematic = isCinematicRoute(pathname);
  /*
    The top header is `fixed` and overlays the page, so every route except the
    homepage has to reserve room for it — otherwise a page's own `<h1>` renders
    underneath the bar. The homepage is exempt because its hero is meant to run
    flush to the top of the viewport and scroll under the header; the header's
    own gradient and the hero's top scrim keep it legible there.
  */
  const overHero = pathname === "/";

  return (
    <main
      id="main"
      // The watch route paints its own viewport-height stage, so it opts out of
      // the shared minimum height here as well as the padding.
      className={cn(
        cinematic ? "pb-0" : "min-h-[70vh] pb-24 md:pb-28",
        !cinematic && !overHero && "pt-16 md:pt-20",
      )}
    >
      {children}
    </main>
  );
}