<template>
    <NuxtLayout :name="device" :config="config">
        <main class="panel-profile">
            <PanelProfileCard />
            <template v-if="device == 'desktop'">
                <PanelInformation />
                <PanelBecomeSeller v-if="type == 'BUYER'" />
                <PanelNationalCard v-else />
            </template>

            <template v-else-if="device == 'mobile'">
                <hr />
                <PanelPorfileMenu />
            </template>
        </main>
    </NuxtLayout>
</template>

<script setup>
import init from '../../initialize/panel'
const { meta } = useRoute()
meta.init = init()
provide('init', meta.init)

const config = reactive({
    desktop: { toolbar: true }, mobile: { header: false },
})

const type = ref('')
const { device } = inject('service')
const { status, data, error } = await useFetch('/api/users/current', {
    headers: {
        Authorization: useCookie('token')
    }
})

if (status.value == 'success') {
    type.value = data.value.accountType
    meta.confirmToSales = data.value.confirmToSales
    provide('data', data.value)
}
else throw createError(error.value)

</script>

<style lang="scss">
.panel-profile {
    @apply container flex flex-wrap justify-evenly items-center gap-[1.9rem];
    @apply lg:gap-5 px-6 sm:px-0 pt-8 pb-20 lg:pt-14 lg:pb-[19.3rem];

    hr {
        @apply bg-[#E5E5E5] w-full;
    }
}
</style>
