<template>
  <div class="tabs-header">
    <div class="tabs-title">
      <h3>{{ title }}</h3>
    </div>
    <UiTab
      v-for="tab in tabs"
      :key="tab.id"
      :selectedTabId="selectedTabId"
      :tab="tab"
      @click="onTabClick(tab)"
    >
      <template #router="{ tab }"><slot name="router" :tab="tab" /></template>
    </UiTab>
  </div>
</template>

<script setup lang="ts">
import { Tab } from '@/models/tab.model';
import UiTab from './UiTab.vue';

const props = defineProps<{
  title: string;
  tabs: Tab[];
  selectedTabId: string | null;
}>();

const $emits = defineEmits<{
  (e: 'click', value: any): void;
}>();

const onTabClick = (tab: Tab) => {
  if (tab.id !== props.selectedTabId) {
    $emits('click', tab);
  }
};
</script>

<style lang="scss" scoped>
.tabs-header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--bms-grey-25);
  box-sizing: border-box;

  .tabs-title {
    margin-right: auto;
    margin-bottom: 16px;

    h3 {
      margin: 0;
    }
  }

  span {
    position: relative;
    top: 1px;
  }
}
</style>
