import dynamic from "next/dynamic";
import { AreaRiservataLayout } from "~/components/Layout";
import { LoadingPage } from "~/components/loading";
import type { NextPageWithLayout } from "~/pages/_app";

const Potenziali = dynamic(
	() => import("~/components/area-riservata/potenziali"),
	{
		loading: () => <LoadingPage />,
		ssr: false,
	},
);

const AdminPotenziali: NextPageWithLayout = () => {
	return (
		<div className="mx-1 flex-1 overflow-auto">
			<div className="mx-auto pt-4">
				<div className="mx-3 items-start justify-between md:flex">
					<div className="flex max-w-lg items-center gap-3">
						<h3 className="font-bold text-accent-foreground text-xl sm:text-2xl">
							Potenziali
						</h3>
					</div>
				</div>
				<div className="p-4">
					<Potenziali />
				</div>
			</div>
		</div>
	);
};
export default AdminPotenziali;

// export const getServerSideProps = (async (context) => {
// 	const access_token = context.req.cookies.access_token;

// 	const helpers = await TrpcAuthedFetchingIstance({ access_token });
// 	if (helpers) {
// 		await helpers.trpc.etichette.getAllEtichette.prefetch();
// 		return {
// 			props: {
// 				trpcState: helpers.trpc.dehydrate(),
// 			},
// 		};
// 	}
// 	return {
// 		props: {},
// 	};
// }) satisfies GetServerSideProps;

AdminPotenziali.getLayout = function getLayout(page) {
	return <AreaRiservataLayout>{page}</AreaRiservataLayout>;
};