<script setup>
import { useRoute } from 'vue-router';

import Current from '@/views/pages/treatment-plan/Current.vue';
import Upcoming from '@/views/pages/treatment-plan/Upcoming.vue';

const route = useRoute()
const activeTab = ref(route.params.tab)

// tabs
const tabs = [
    {
        title: 'Current',
        tab: 'current',
    },
    {
        title: 'Upcoming',
        tab: 'upcoming',
    },
]
</script>

<template>
    <div>
        <VTabs v-model="activeTab" show-arrows>
            <VTab v-for="item in tabs" :key="item.icon" :value="item.tab">
                <VIcon size="20" start />
                {{ item.title }}
            </VTab>
        </VTabs>
        <VDivider />

        <VWindow v-model="activeTab" class="mt-5 disable-tab-transition">
            <VWindowItem value="current">
                <Current />
            </VWindowItem>
            <VWindowItem value="upcoming">
                <Upcoming />
            </VWindowItem>
        </VWindow>
    </div>
</template>
