<template>
  <div class="flex flex-col items-center">
    <p class="gw-metric pb-3" style="font-size: 1.75rem">grateWizard</p>

    <!-- Tab buttons -->
    <div class="flex gap-0.5 p-0.5 rounded-full bg-surface-200">
      <button
        v-for="tab in tabs"
        :key="tab.key"
        class="gw-tab-btn"
        :class="activeTab === tab.key
          ? 'gw-tab-active'
          : 'gw-tab-inactive'"
        :disabled="tab.disabled"
        @click="activeTab = tab.key"
      >
        {{ tab.label }}
      </button>
    </div>

    <!-- Tab content with KeepAlive -->
    <div class="w-full">
      <KeepAlive>
        <GratewizardGwMN v-if="activeTab === '1'" />
        <GratewizardGwCRA v-else-if="activeTab === '2'" />
        <GratewizardGwCRS v-else-if="activeTab === '3'" />
      </KeepAlive>
    </div>
  </div>
</template>

<script setup lang="ts">
const tabs = [
  { key: '1', label: 'M/N local', disabled: false },
  { key: '2', label: "A l'anciennet\u00e9", disabled: false },
  { key: '3', label: 'Au solde', disabled: false },
  { key: '4', label: 'Au volume', disabled: true },
];

const activeTab = ref('1');
</script>
