<template>
    <div :class="['bg-gray-800 min-h-14 p-3', $attrs.class]">
        <div class="flex flex-row items-center justify-between h-full">
            <!-- Left section -->
            <ToolbarSection :items="config.leftSection" />

            <!-- Center section (optional slot) -->
            <slot name="center" />

            <!-- Right section -->
            <ToolbarSection :items="config.rightSection" align="right" />
        </div>
    </div>
</template>

<script setup>
    import ToolbarSection from './ToolbarSection.vue';

    defineProps({
        config: {
            type: Object,
            required: true,
            validator: value => {
                return Array.isArray(value.leftSection) && Array.isArray(value.rightSection);
            }
        }
    });
</script>
