import type { ReactNode } from "react";
import MotionPageWrapper from "@/components/motion-page-wrapper";
import { Navigation } from "@/components/navigation";
import RadioPlayerGate from "@/components/public/radio-player-gate";
import { SiteFooter } from "@/components/site-footer";
import { SiteHeader } from "@/components/site-header";
import { TopHeader } from "@/components/top-header";
import { auth } from "@/lib/auth";

/**
 * Public site chrome. Route group `(site)` keeps this off `/admin` and `/client`,
 * so housekeeping is never constrained by the public max-w-7xl grid.
 */
export default async function SiteLayout({
	children,
}: {
	children: ReactNode;
}) {
	const session = await auth();

	return (
		<>
			{session?.user?.id ? (
				<>
					<TopHeader session={session} />
					<SiteHeader />
					<Navigation session={session} />
				</>
			) : null}
			<main>
				<div className="mx-auto mt-4 grid max-w-7xl grid-cols-12 gap-x-3 gap-y-5 px-3 py-3 sm:px-4 sm:py-4 md:mt-0 md:px-6 md:py-6 md:gap-y-6">
					<div className="col-span-12 min-w-0">
						<MotionPageWrapper>{children}</MotionPageWrapper>
					</div>
				</div>
			</main>
			<SiteFooter />
			<RadioPlayerGate />
		</>
	);
}