<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="$q.screen.lt.md ? 'column no-wrap flex-center' : 'row'"
        :style="$q.screen.lt.md ? 'width: 90vw;' : 'width: 40vw;'"
    >
        <MenuHeader
            :user-first-name="firstName"
            :user-last-name="lastName"
        />
        
        <q-card
            class="col-auto q-pa-xs"
            :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>
        </q-card>

        <q-card
            class="col"
            :class="$q.screen.lt.md ? 'full-width' : 'q-ml-sm'"
        >
            <q-tab-panels
                v-model="current_menu"
                animated
                vertical
                transition-prev="jump-up"
                transition-next="jump-up"
                class="rounded-5"
                style="height: 50vh;"
            >
                <slot name="panels"></slot>
            </q-tab-panels>
        </q-card>

    </div>
</template>