import { createApp } from 'vue'
import App from './App.vue'

import '@unocss/reset/tailwind.css'
import './styles/main.css'
import 'uno.css'
import { createI18n } from 'vue-i18n'
import { createHead, useHead } from '@vueuse/head'
import { messages } from './modules/i18n'
import VueHighlightJS from 'vue3-highlightjs'
import 'highlight.js/styles/solarized-light.css'

const app = createApp(App)

app.use(VueHighlightJS)
import routes from './router'
//import AppLayout from '~/layouts/AppLayout.vue'
import SimpleLayout from '~/layouts/SimpleLayout.vue'

const i18n = createI18n({
  locale: navigator.language === 'es' ? 'es' : 'en',
  legacy: false,
  fallbackLocale: ['en'],
  fallbackWarn: false,
  missing: (locale, key, instance) => {
    console.warn(`detect '${key}' key missing in '${locale}'`)
  },
  messages,
})
const head = createHead()
app.use(routes)
app.use(i18n)
app.use(head)
app.component('SimpleLayout', SimpleLayout)
app.mount('#app')