<!-- TAB BUTTONS -->
<div class="tabs">
  <button
    v-for="([id, label]) in tabs"
    :key="id"
    :class="['tab-button', { active: activeTab === id }]"
    @click="activeTab = id"
  >
    {{ label }}
  </button>
</div>

<!-- TAB CONTENTS -->
<div
  v-for="([id]) in tabs"
  :key="id + 'content'"
  class="tab-content"
  v-show="activeTab === id"
>
  <iframe
    :src="`https://lookerstudio.google.com/embed/reporting/${reports[id]}?hl=en&locale=en_US`"
    width="100%"
    height="600"
    style="border:1px solid #ccc; border-radius:12px"
    allowfullscreen
  ></iframe>
</div>


    </main>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const tabs = [
  ['equipments', 'Equipment List'],
  ['bottom-ash', 'Bottom Ash System'],
  ['combustion', 'Combustion System'],
  ['wts', 'Water Treatment'],
  ['sws', 'Steam and Water'],
  ['sccws', 'Seawater & CCW'],
  ['cbhs', 'Coal & Biomass Handling'],
  ['cas', 'Compressed Air'],
  ['fps', 'Fire Protection'],
  ['tls', 'Turbine Lubrication'],
  ['cs', 'Chlorination System'],
  ['electrical', 'MV & LV Electrical'],
  ['substation', 'Substation'],
  ['heavy-equipment', 'Heavy Equipment'],
]

const reports = {
  equipments: 'd352150b-4e89-4001-81b2-de867e297a8c/page/FgoMF',
  'bottom-ash': '599ffaca-2a41-4b85-85ec-b821f6d9eb67/page/0LnXE',
  combustion: '8a75e5d6-13b7-4909-8b21-527b4b881899/page/JFkXE',
  wts: '8bc2ea88-3237-4067-8038-ddedcf518d6b/page/S7lXE',
  sws: '31550e49-593a-4bb1-b28c-5976f832ca89/page/3GmXE',
  sccws: '3181bb17-0a4d-495e-a528-636473d8f8e7/page/RODZE',
  cbhs: 'b97c0586-c398-400e-b9c1-29d5ca202213/page/FWCZE',
  cas: '91d45cc4-a71f-46c9-8994-7728efbcd351/page/5yQLF',
  fps: 'cb17ee56-455f-4d73-94aa-1348c7bfc14e/page/9c4LF',
  tls: 'bfff5852-d4ad-4fbe-ac5b-7eb5969b177e/page/oIRLF',
  cs: 'd310dc9c-d490-4894-8758-a48105b8d032/page/HRiMF',
  electrical: '5ddd0d24-ba27-4418-bc1d-267f032e79de/page/ikhMF',
  substation: '2082eb80-412b-48db-b980-42e440ca6715/page/Q8hMF',
  'heavy-equipment': '5a0e602c-1a7d-438f-8b3f-45f0e49072dd/page/QLiMF',
}

const activeTab = ref('equipments')
const isScrolled = ref(false)
const isMobile = ref(false)
const menuOpen = ref(false)

const handleScroll = () => {
  isScrolled.value = window.scrollY > 50
}

const toggleMenu = () => {
  menuOpen.value = !menuOpen.value
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
  isMobile.value = window.innerWidth <= 768
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped>
@import "@/assets/style.css";
@import "@/assets/equipment-status.css";
</style>

this is my code. help me because when i click on the tabs button. i doesn't show that active view.