import { createSSRApp, h } from 'vue';
import { createPinia } from 'pinia';
import FloatingVue from 'floating-vue';

import Container from './container.vue';
import { setPageContext } from './usePageContext';

import '../assets/css/style.css';
import 'floating-vue/dist/style.css';

function createApp(pageContext) {
	const PageWithLayout = {
		render() {
			return h(Container, {}, {
				default() {
					return h(pageContext.Page, pageContext.pageData || {});
				},
			});
		},
	};

	const app = createSSRApp(PageWithLayout);
	const store = createPinia();

	app.use(store);
	app.use(FloatingVue);

	// We make pageContext available from any Vue component
	setPageContext(app, pageContext);

	return { app, store };
}

export { createApp };