<script setup>
import AccountSettingsAccount from '@global/components/views/user/profile/AccountSettingsAccount.vue'
import AccountSettingsBillingAndPlans from '@global/components/views/user/profile/AccountSettingsBillingAndPlans.vue'
import AccountSettingsSecurity from '@global/components/views/user/profile/AccountSettingsSecurity.vue'

const route = useRoute()

// tabs
const tabs = [
  {
    title: 'Informações da conta',
    icon: 'tabler-users',
    tab: 'account',
  },
  {
    title: 'Segurança',
    icon: 'tabler-lock',
    tab: 'security',
  },
  {
    title: 'Assinaturas',
    icon: 'tabler-file-text',
    tab: 'billing-plans',
  }
]

// active tab
const activeTab = ref(route.params.tab || 'account')

</script>

<template>
  <div>
    <h3 class="text-lg font-semibold mb-1">Configurações da conta</h3>
    <p class="text-sm mb-6">Gerencie suas informações pessoais, segurança, notificações, conexões e planos de assinatura.</p>

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

    <VWindow v-model="activeTab" class="mt-6 disable-tab-transition" :touch="false">
      <!-- Account -->
      <VWindowItem value="account">
        <AccountSettingsAccount />
      </VWindowItem>

      <!-- Security -->
      <VWindowItem value="security">
        <AccountSettingsSecurity />
      </VWindowItem>

      <!-- Billing -->
      <VWindowItem value="billing-plans">
        <AccountSettingsBillingAndPlans />
      </VWindowItem>
    </VWindow>
  </div>
</template>
