/**
 * TabbedPane Component
 * A component for displaying content in tabs
 */
Vue.component('tabbed-pane', {
    props: {
        tabs: {
            type: Array,
            required: true
        },
        activeTab: {
            type: String,
            required: true
        },
        selectedNode: {
            type: Object,
            default: null
        },
        platformType: {
            type: String
        },
        connection: {
            type: Object,
            default: null
        },
        totalItems: { type: Number, default: 0 },
        excludedCount: { type: Number, default: 0 }
    },
    methods: {
        changeTab(tabId) {
            this.$emit('tab-changed', tabId);
        }
    },
    template: `
        <div class="tabbed-pane">
            <div class="tab-bar">
                <div v-for="tab in tabs" :key="tab.id"
                    class="tab-item"
                    :class="{ active: tab.id === activeTab }"
                    @click="changeTab(tab.id)">
                    {{ tab.name }}
                </div>
            </div>
            
            <div class="tab-content mt-3">
                <div class="tab-pane fade show active">
                    <component 
                        :is="activeTab + '-tab'" 
                        :selected-node="selectedNode"
                        :connection="connection"
                        :platform-type="platformType"
                        :total-items="totalItems"
                        :excluded-count="excludedCount"
                    ></component>
                </div>
            </div>
        </div>
    `
}); 