<template>
  <div class="tabs">
    <div class="tabs__header flex space-x-4">
      <div
        v-for="tab in tabs"
        :key="tab.slug"
        class="tab__header"
        :class="{ 'tab__header--active': openTab === tab.slug }"
        @click="handleTabClick(tab)"
      >
        {{ tab.title }}
      </div>
    </div>
    <div class="tabs__body">
      <slot></slot>  
    </div>
  </div>
</template>

<script>
import "../../../dist/components/Tabs.css";
export default {
  name: "sui-tabs-container",
  components: {},

  props: {
    openTabPreset: {
      type: String,
      default: "option01",
    },
    tabs: {
      type: Array,
      default: () => [],
    },
    toggle: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      openTab: this.openTabPreset,
    };
  },
  methods: {
    handleTabClick(tab){
      this.openTab = tab.slug
      this.$emit('tab-change',tab)
    }
  },
};
</script>

<style lang="scss" scoped></style>
