<template>
  <Tabs :tabs="tabs" @tab-change="handleTabChange">
    <Tab v-for="{ content, slug } of tabs" :content="content" :active="slug === openTab" :key="`tab-body-${slug}`"></Tab>
  </Tabs>
</template>

<script>
import Tabs from "./Tabs.vue";
import Tab from "./Tab.vue"

export default {
  name: "sui-tabs-example",
  components: {
    Tabs,
    Tab
  },

  props: {
    tabs: {
      type: Array,
      default: () => [
        {
          icon: "plus",
          title: "headers.label",
          slug: "option01",
          content: ["Simple Content"],
        },
        {
          icon: "plus",
          title: "headers.label",
          slug: "option02",
          content: ["Simple Content"],
        },
        {
          icon: "plus",
          title: "headers.label",
          slug: "option03",
          content: ["Simple Content"],
        },
      ],
    },
    
  },
  data() {
    return {
      openTab: this.tabs[0].slug,
    };
  },
  methods: {
    handleTabChange(newTab){
      this.openTab = newTab.slug
    }
  },
};
</script>

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