import NavLinks from '@/app/ui/nav-links'
import styles from '@/app/styles/page.module.scss'
import HeaderPanel from '../ui/header/headerPanel';
import { getQueryClient } from '@/app/providers/getQueryClient';
import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
import { getUserData } from '@/app/actions/action';

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

	await Promise.all([
		queryClient.prefetchQuery({
			queryKey: ['userData'],
			queryFn: () => getUserData()
		})
	])

	return (
		<div className="flex">
			<HydrationBoundary state={dehydrate(queryClient)}>
				<NavLinks />
				<div className={`${styles['main-containter']}`}>
					<HeaderPanel />
					<main>
						{children}
					</main>
				</div>
			</HydrationBoundary>
		</div>
	);
}