import NitrogenRenderer from './NitrogenRenderer.js';
import { useNitrogenData } from './useNitrogenData.js';

/*

In the use case of Astro, this code should be copied into the project as a component,
and then the import to the registerComponents.ts should be added in here.

Without that Astro will render the component fine on server,
but the client won't have access to the registered components.

*/

type NitrogenPageProps = {
	page: {
		data: any[];
		id: string | number;
	};
	dynamicData?: any;
	requestedData?: any;
	templatePage?: {
		data: any[];
	};
};

export default function NitrogenPage({
	page: propsPage,
	dynamicData,
	requestedData,
	templatePage,
}: NitrogenPageProps) {
	const page = useNitrogenData({
		type: 'page',
		id: propsPage.id,
		data: propsPage.data,
		dynamicData,
	});

	if (templatePage) {
		return (
			<main data-nitrogen-location='page'>
				<NitrogenRenderer
					page={templatePage.data}
					contentPage={page?.data ?? []}
					dynamicData={page?.dynamicData ?? dynamicData}
					requestedData={requestedData}
				/>
			</main>
		);
	}

	return (
		<main data-nitrogen-location='page'>
			<NitrogenRenderer
				page={page?.data ?? []}
				dynamicData={page?.dynamicData ?? dynamicData}
				requestedData={requestedData}
			/>
		</main>
	);
}