<template>
    <NuxtLayout :name="device" :config="config">
        <main class="panel-information">
            <PanelInformation />
            <PanelBecomeSeller v-if="type == 'BUYER'" />
            <PanelNationalCard v-if="type == 'RETAILER'" />
        </main>
    </NuxtLayout>
</template>

<script setup>
const { device, t } = inject('service')
const config = reactive({
    mobile: {
        header: {
            title: t('userInfo'),
            back: true,
            options: [
                {
                    props: {
                        icon: "isax isax-edit-2", severity: "secondary", text: true, rounded: true,
                        click: () => navigateTo('/panel/edit')
                    }
                }
            ]
        }
    },
})
const { meta } = useRoute()

if (device.value == 'desktop') navigateTo('/panel/profile')

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

if (status.value == 'success') {
    type.value = data.value.accountType
    provide('data', data.value)

}
else throw createError(error.value)
</script>

<style lang="scss">
.panel-information {
    @apply flex flex-col px-6 pt-[1.9rem] pb-20 gap-[2.6rem];
}
</style>