<template>
    <div :class="containerClasses">
        <component :is="layoutComponent" />
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useLayoutStore } from '@/store/layoutStore';
import { useMeta } from './composables/use-meta';
import appLayout from './layouts/app-layout.vue';
import authLayout from './layouts/auth-layout.vue';
import './assets/sass/app.scss';

const { t } = useI18n();
useMeta({ title: t('brand.default_page_title') });

const layoutStore = useLayoutStore();

const layoutComponent = computed(() => {
    return layoutStore.layout === 'auth' ? authLayout : appLayout;
});

const containerClasses = computed(() => {
    const classes = [];
    if (layoutStore.layout_style) {
        classes.push(layoutStore.layout_style);
    }
    if (layoutStore.menu_style) {
        classes.push(layoutStore.menu_style);
    }
    return classes;
});
</script>
