<template>
    <div class="flex items-center space-x-2 h-full">
        <template v-for="(item, index) in items" :key="index">
            <ToolbarButton
                v-if="item.type === 'button'"
                :icon="item.icon"
                :label="item.label"
                :active="item.active"
                :disabled="item.disabled"
                @click="item.onClick" />
            <ToolbarDropdown
                v-else-if="item.type === 'dropdown'"
                :icon="item.icon"
                :label="item.label"
                :active="item.active"
                :items="item.items" />
            <Divider v-else-if="item.type === 'divider'" />
            <span
                v-else-if="item.type === 'label'"
                :class="['text-white px-1 select-none', item.class || 'text-xs']">{{ item.text }}</span>
        </template>
    </div>
</template>

<script setup>
    import ToolbarButton from './ToolbarButton.vue';
    import ToolbarDropdown from './ToolbarDropdown.vue';
    import Divider from './Divider.vue';

    defineProps({
        items: {
            type: Array,
            required: true,
            default: () => [],
            validator: items => {
                return items.every(
                    item =>
                        item &&
                        item.type &&
                        (item.type === 'button' ||
                            item.type === 'divider' ||
                            item.type === 'label' ||
                            (item.type === 'dropdown' && Array.isArray(item.items)))
                );
            }
        }
    });
</script>
