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

    const { firstName, lastName, 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' : 'row'"
        :style="$q.screen.lt.md ? 'width: 90vw;' : 'width: 40vw;'"
    >   
         <MenuHeader
            :user-first-name="firstName"
            :user-last-name="lastName"
        />

        <div 
            class="col-3 no-wrap"
            :class="$q.screen.lt.md ? '' : 'column'"
        >
            <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"
                    dense
                    active-color="primary"
                    indicator-color="primary"
                >
                    <slot name="tabs"></slot>
                </q-tabs>
            </q-card>
            <div class="col"></div>
        </div>

        <q-card 
            class="col"
            :class="$q.screen.lt.md ? '' : '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>