import { useEffect, useState } from 'octane';
import { isServer } from '@tanstack/router-core/isServer';
import { useRouter } from './context.ts';

export function ScriptOnce(props: { children: string }) @{
	const router = useRouter();
	const [hydrating, setHydrating] = useState(true);
	useEffect(() => {
		setHydrating(false);
	}, []);

	@if ((isServer ?? router.isServer) || hydrating) {
		<script
			nonce={router.options.ssr?.nonce}
			dangerouslySetInnerHTML={{
				__html: props.children,
			}}
		/>
	} @else {
		<></>
	}
}