import { type ReactNode, useEffect } from 'react';

import { ensureSyntoDashboardScripts } from '@admin/lib/load-synto-dashboard-scripts';
import { ensureSyntoThemeScripts } from '@admin/lib/load-synto-theme-scripts';

interface SyntoDashboardRootProps {
    children: ReactNode;
}

/**
 * Wrapper that matches Synto DOM shell (overlay + page) and loads template JS once the shell exists.
 */
export function SyntoDashboardRoot({ children }: SyntoDashboardRootProps) {
    useEffect(() => {
        const load = async (): Promise<void> => {
            await ensureSyntoDashboardScripts();
            await ensureSyntoThemeScripts();
        };

        load().catch((err) => {
            console.error('[Synto dashboard]', err);
        });
    }, []);

    return (
        <>
            <div id="responsive-overlay" />
            <div className="page">{children}</div>
        </>
    );
}