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

/**
 * AppShell
 *
 * Purpose:
 * - Provide a stable frame for all protected pages:
 *   - Top navigation (always visible)
 *   - Optional sidebar area (desktop)
 *   - Main content area (route pages render here)
 *
 * Layout notes:
 * - The outer wrapper must be `flex flex-col` so the content region can use `flex-1`
 *   and fill the remaining viewport height below the TopNav.
 *
 * Test/runtime note:
 * - Our Vitest/Vite setup currently uses the "classic" JSX runtime in unit tests,
 *   which requires React to be in scope. Importing React here ensures tests work
 *   without introducing additional build tooling configuration.
 */
export default function AppShell({ children }) {
	return (
		<div className="min-h-screen flex flex-col">
			<TopNav />

			{/* Content area below the top navigation */}
			<div className="mx-auto flex w-full max-w-7xl flex-1 gap-4 px-4 py-4">
				{/* Sidebar is reserved space for navigation/filter UI.
            We hide it on small screens for now (responsive baseline). */}
				<aside className="hidden w-64 shrink-0 md:block">
					<SidebarPlaceholder />
				</aside>

				{/* Main content: all route pages render here */}
				<main className="min-w-0 flex-1">{children}</main>
			</div>
		</div>
	);
}