<template>
  <div>
    <DefaultHeaderPage title="Cadastros" :show-filter-icon="false" />

    <div class="q-px-sm">
      <CustomTabComponent
        v-model:active-tab="currentTab"
        :tabs="tabs"
        class="q-mb-sm"
      />

      <div v-show="currentTab === 'usuarios'">
        <UsuariosTab />
      </div>

      <div v-show="currentTab === 'grupos'">
        <GruposTab />
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineAsyncComponent, ref } from "vue";
import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
import CustomTabComponent from "src/components/shared/CustomTabComponent.vue";

const UsuariosTab = defineAsyncComponent(() => import("./tabs/UsuariosTab.vue"));
const GruposTab = defineAsyncComponent(() => import("./tabs/GruposTab.vue"));

const currentTab = ref("usuarios");

const tabs = [
  { name: "usuarios", label: "Usuários" },
  { name: "grupos", label: "Grupos" },
];
</script>
