<template>
  <div class="tabs is-centered">
    <ul>
      <li
        v-for="window in props.windows"
        :key="window.label"
        @click="emit('set-window', window)"
        :class="{ 'is-active': window.label === activeWindow?.label }"
      >
        <a>{{ window.label }}</a>
      </li>
    </ul>
  </div>
</template>
<script setup lang="ts">
import type { Window } from '@/utils/types'

const props = defineProps<{
  activeWindow: Window
  windows: Window[]
}>()

const emit = defineEmits<{
  'set-window': [window: Window]
}>()
</script>
