<template>
  <div>
    <DefaultHeaderPage title="TBR - Configurações" :show-filter-icon="false" />

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

      <div v-show="currentTab === 'settings'">
        <SettingsTab />
      </div>

      <div v-show="currentTab === 'contracts'">
        <ContractsTab />
      </div>

      <div v-show="currentTab === 'billings'">
        <BillingsTab />
      </div>

      <div v-show="currentTab === 'inhabitant_classifications'">
        <InhabitantClassificationsTab />
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineAsyncComponent, ref } from "vue";

import CustomTabComponent from "src/components/shared/CustomTabComponent.vue";
import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";

const SettingsTab = defineAsyncComponent(
  () => import("./tabs/SettingsTab.vue"),
);
const ContractsTab = defineAsyncComponent(
  () => import("./tabs/ContractsTab.vue"),
);
const BillingsTab = defineAsyncComponent(
  () => import("./tabs/BillingsTab.vue"),
);

const InhabitantClassificationsTab = defineAsyncComponent(
  () => import("./tabs/InhabitantClassificationsTab.vue"),
);

const currentTab = ref("settings");

const tabs = [
  { name: "settings", label: "Configurações" },
  { name: "inhabitant_classifications", label: "Faixas" },
  { name: "contracts", label: "Contratos" },
  { name: "billings", label: "Cobranças" },
];
</script>
