<script
    setup
    lang="ts"
>
    import { ref } from 'vue';
    import MenuHeader from 'src/modules/profile/components/shared/menu-header.vue';

    const { initialMenu } = defineProps<{
        firstName: string;
        lastName: string;
        initialMenu: string;
    }>();

    const current_menu = ref<string>(initialMenu);
</script>

<template>
    <div
        class="column flex-center fit"
    >
        <MenuHeader
            :user-first-name="firstName"
            :user-last-name="lastName"
            class="col-auto"
        />
        
        <div class="col full-width" :class="$q.screen.lt.sm ? 'column' : 'row'">
            <div
                class="col-auto q-pa-xs bg-dark rounded-5 shadow-2"
                :class="$q.screen.lt.md ? 'q-mb-sm' : 'q-mr-sm'"
            >
                <q-tabs
                    v-model="current_menu"
                    :vertical="$q.screen.gt.sm"
                    active-color="accent"
                    indicator-color="accent"
                >
                    <slot name="tabs"></slot>
                </q-tabs>
            </div>
    
            <q-card
                class="col"
                :class="$q.platform.is.mobile ? 'fit' : 'q-ml-sm'"
            >
                <q-tab-panels
                    v-model="current_menu"
                    animated
                    vertical
                    transition-prev="jump-up"
                    transition-next="jump-up"
                    class="rounded-5 q-py-sm"
                    :style="$q.platform.is.mobile ? '' : 'height: 50vh;'"
                >
                    <slot name="panels"></slot>
                </q-tab-panels>
            </q-card>
        </div>

    </div>
</template>