<script setup>
import { provide, ref, useSlots } from 'vue';

defineProps({
    selectedColor: {
        type: String,
        default: 'blue-600'
    }
});

const slots = useSlots();
const tabs = ref(slots.default().map((tab) => tab.props ));
const selected = ref(tabs.value[0].name);

provide('selected', selected);

</script>
<template>
    <div class="text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700">
        <ul class="flex flex-wrap -mb-px">
            <li class="me-2" v-for="tab in tabs" :key="tab.name">
                <button 
                    @click="selected = tab.name"
                    class="inline-block p-4"
                    :class="{ 
                        ['border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300']: tab.name !== selected,
                        [`text-${ selectedColor } border-b-2 border-${ selectedColor } rounded-t-lg active dark:text-blue-500 dark:border-${ selectedColor }`]: tab.name === selected 
                    }"
                >
                    {{ tab.title }}
                </button>
            </li>
        </ul>
    </div>
    <div id="default-tab-content">
        <slot />
    </div>
</template>