<script setup>
import { useRouter} from "vue-router";
import { ref } from 'vue';

const router = useRouter();
// Get the user from the route
const departmentId = ref(router.currentRoute.value.params.departmentId)

const tabs = [
  { name: 'Overview', path: '/superuser/configuration/' },
  { name: 'E-conomic', path: '/superuser/configuration/economic' },
  { name: 'reCAPTCHA', path: '/superuser/configuration/recaptcha' },
  { name: 'Email', path: '/superuser/configuration/email' },
  { name: 'Backup', path: '/superuser/configuration/backup' },
  { name: 'MotorAPI', path: '/superuser/configuration/motorapi' },
  { name: 'Stripe', path: '/superuser/configuration/stripe' },
  { name: 'FXRatesAPI', path: '/superuser/configuration/fxratesapi' },
  { name: 'GatewayAPI', path: '/superuser/configuration/gatewayapi' },
  { name: 'XLVask', path: '/superuser/configuration/xlvask' },
  { name: 'Entra', path: '/superuser/configuration/entra'},
];

// Get the current path
const currentPath = ref(router.currentRoute.value.path);

// Get the index of the active tab
const activeTab = tabs.findIndex(tab => tab.path === currentPath.value);

// Change the tab
const changeTab = (index) => {
  router.push(tabs[index].path);
};
</script>

<template>
  <div>
    <div class="tabs is-right">
      <ul>
        <li v-for="(tab, index) in tabs" :key="index" :class="{'is-active': activeTab === index}" @click="changeTab(index)">
          <a>{{ tab.name }}</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
</style>