import 'material-symbols'
import './assets/main.css'
import './assets/main.scss'

import { createApp as createVueApp, createSSRApp } from 'vue'
import { createPinia } from 'pinia'
import { createHead } from '@vueuse/head'

import App from './App.vue'
import { createAppRouter } from './router'
import { createI18nInstance } from './i18n/i18n.js'
import { installSeoHook } from './seo/seoHook'

export function createApp({ history, isClient = false }) {
  const app = (isClient ? createVueApp : createSSRApp)(App)
  const router = createAppRouter({ history })
  const i18n = createI18nInstance()
  const head = createHead()

  app.use(createPinia())
  app.use(router)
  app.use(i18n)
  app.use(head)

  installSeoHook(router, head)

  return { app, router, head }
}
