<template>
  <div class="tabs">
    <div class="tabbar">
      <div
        class="tab"
        :class="{active: selectedTab === tab.key}"
        v-for="tab in tabs" @click="selectedTab = tab.key"
        >
        {{ tab.label }}
      </div>
    </div>
    <div v-for="slot, name in slots" v-show="selectedTab === name">
      <slot :name="name"></slot>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref} from 'vue';

const props = defineProps<{
  tabs: {label: string, key: string}[]
}>()

const slots = defineSlots<{
  slotName: string,
  Id: string,
}>()

console.log(slots)

const selectedTab = ref(props.tabs?.[0]?.key);

</script>
<style>

@scope(.tabs) {
  .tabbar {
    display: flex;
    gap: 0.5rem;
    padding: 0 0.5rem;
    border-bottom: 1px solid white;
  }
  .tab {
    cursor: pointer;
    padding: 0.5rem;
    border:1px solid white;
    border-bottom: none;
    border-radius: 5px 5px 0 0;

    &.active {
      background-color: white;
      color: black;
    }
  }
}
</style>