<template>
    <div>
        <div class="tabs is-centered">
            <ul>
                <li v-for="(tab, index) in tabs" :class="{ 'is-active': selected == index }">
                    <a @click="select(index)">
                        <span>{{ names[index] }}</span>
                    </a>
                </li>
            </ul>
        </div>
        <div v-for="(tab, index) in tabs" v-show="selected == index">
            <slot :name="tab"></slot>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                selected: 0,
            }
        },
        mounted() {
            select(0)
        },
        methods: {
            select(index) {
                this.selected = index
            }
        },
        props: {
            'tabs': Array,
            'names': Array,
        },
    }
</script>