import React from "react";
import TopNav from "@/components/app-shell/TopNav";
import SidebarPlaceholder from "@/components/app-shell/SidebarPlaceholder";

export default function AppShell({ children }) {
	return (
		<div className="min-h-screen flex flex-col">
			<TopNav />

			{/* 
				Layout strategy (2xl+):
				- Center column is exactly 40% width.
				- Left/right gutters are flexible.
				- Sidebar is placed in the left gutter and aligned to the right edge,
				  so it “docks” to the centered content without consuming its width.

				Below 2xl:
				- Keep the app wide (single-column flow).
				- Sidebar is hidden (it would otherwise reduce main content width).
			*/}
			<div className="flex-1 px-4 py-4">
				<div className="mx-auto grid w-full gap-4 2xl:grid-cols-[1fr_minmax(0,40%)_1fr]">
					<aside className="hidden 2xl:col-start-1 2xl:block 2xl:justify-self-end">
						{/* 
							Sidebar width policy:
							- Fixed width keeps it stable and prevents “percentage jitter”.
							- Adjust these widths if you want a bigger/smaller left rail.
						*/}
						<div className="w-96">
							<SidebarPlaceholder />
						</div>
					</aside>

					<main className="min-w-0 2xl:col-start-2">{children}</main>
				</div>
			</div>
		</div>
	);
}