import NavLinks from '@/app/ui/navigation/nav-links'
import HeaderPanel from '@/app/ui/header/headerPanel';
import { getQueryClient } from '@/app/providers/getQueryClient';
import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
import { prefetchLayoutQueries } from '@/app/lib/prefetch-queries';
import ActivityTracker from '@/app/components/ActivityTracker';

export default async function Layout({ children }: { children: React.ReactNode }) {
	const queryClient = getQueryClient();

	await prefetchLayoutQueries(queryClient);

	return (
		<div className="flex">
			<HydrationBoundary state={dehydrate(queryClient)}>
				<NavLinks />
				<div className="main-containter-wrapper">
					<HeaderPanel />
					<main className="main-containter">
						{children}
					</main>
				</div>
			</HydrationBoundary>
			<ActivityTracker/>
		</div>
	);
}