<template>
  <q-tabs
    v-model="tab"
    class="button bg-background-2 text-font"
    indicator-color="transparent"
    active-color="dark"
    active-bg-color="surface"
    v-bind="$attrs"
    align="justify"
  >
    <q-tab
      v-for="(q_tab, i) in tabsItems"
      :key="i"
      :name="q_tab.name"
      :label="q_tab.label"
      :disable="q_tab.disable"
      :class="{ hidden: q_tab.hide }"
      class="bg-white"
      style="border: none"
    />
  </q-tabs>
</template>

<script setup>
const { tabsItems } = defineProps({
  tabsItems: {
    type: Array,
    required: false,
    default: () => [],
  },
});

const tab = defineModel();
</script>
