<script setup>
import ProfileInfo from '@/views/pages/profile/profile-info.vue';
import { useRoute } from 'vue-router';

const route = useRoute()
const activeTab = ref('info')
const skill = ref(20)
const knowledge = ref(33)
const power = ref(78)
// tabs
const tabs = [
    {
        title: 'Profile',
        tab: 'info',
    },


]
</script>

<template>

    <div>
        <VTabs v-model="activeTab" show-arrows>
            <VTab v-for="item in tabs" :value="item.tab">
                <VIcon size="20" icon="mdi-account" start />

                {{ item.title }}
            </VTab>
        </VTabs>
        <VDivider />

        <!-- <div class="demo-space-y mt-3">
            <VProgressLinear v-model="skill" color="primary" class="rounded" height="20">
                <template #default="{ value }">
                    <strong>{{ Math.ceil(value) }}% profile complete</strong>
                </template>
</VProgressLinear>
</div> -->
        <VWindow v-model="activeTab" class="mt-5 disable-tab-transition">
            <!-- Account -->
            <VWindowItem value="info">
                <ProfileInfo />
            </VWindowItem>
        </VWindow>
    </div>
</template>
