<template>
    <div class="bg-surface-50 dark:bg-surface-950 dark:text-gray-100 min-h-svh">
        <NuxtPage />
    </div>
</template>
<script setup>

import 'primeicons/primeicons.css'

const siteData = ref()
const nuxtApp = useNuxtApp()
const categoriesStore = useCategoriesStore()
const placeStore = useMyPlacesStore()
const authStore = useAuthStore()
const userToken = ref('')
async function loadData() {
    const { data } = await useFetch('https://olcsoberauto.hu/rest/init',
        {
            headers: {
                'auth-key': userToken.value
            }
        }
    )

    if (data.value?.user) {
        authStore.user = { id: 1, name: 'Juhász Ervin', email: 'ervinstyle@gmail.com' }
    }

    authStore.user = { id: 1, name: 'Juhász Ervin', email: 'ervinstyle@gmail.com' }

    if (data.value?.categories) {
        categoriesStore.categories = data.value.categories
        placeStore.places = data.value.places
    }
}

nuxtApp.hook('app:mounted', async () => {
    userToken.value = window.localStorage.getItem('userToken')
    await loadData()
})

</script>
<style>
html {
    font-size: 18px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.text-center{
    text-align: center;
}
.text-start{
    text-align: start;
}
.text-end{
    text-align: end;
}
</style>