<template>
  <PageHeader title="Settings" />

  <UiTabs v-model="activeTab" class="mb-16" :options="tabs" />

  <NuxtPage />
</template>

<script setup lang="ts">
definePageMeta({
  middleware: ['auth'],
})

const route = useRoute()
const router = useRouter()

const activeTab = ref(route.path)

const tabs = computed(() => [
  {
    label: 'Profile',
    value: '/settings',
  },
  {
    label: 'Safety',
    value: '/settings/safety',
  },
  {
    label: 'Notifications',
    value: '/settings/notifications',
  },
  {
    label: 'Limits',
    value: '/settings/limits',
  },
])

watch(activeTab, (value) => {
  router.push(value)
})
</script>

<style lang="scss">

</style>
