<template>
  <div :class="['bg-white shadow-sm px-4 py-2', $attrs.class]">
    <div class="container mx-auto flex justify-between items-center">
      <!-- Left section -->
      <div class="flex items-center space-x-2">
        <button
          v-for="(item, index) in config.leftSection"
          :key="index"
          @click="item.onClick"
          :class="[
            'p-2 rounded-lg transition-colors',
            item.active 
              ? 'bg-green-100 text-green-600' 
              : 'hover:bg-gray-100'
          ]"
        >
          <component :is="item.icon" class="h-5 w-5" />
          <span v-if="item.label" class="ml-2">{{ item.label }}</span>
        </button>
      </div>

      <!-- Right section -->
      <div class="flex items-center space-x-2">
        <button
          v-for="(item, index) in config.rightSection"
          :key="index"
          @click="item.onClick"
          class="p-2 rounded-lg hover:bg-gray-100 transition-colors"
        >
          <component :is="item.icon" class="h-5 w-5" />
        </button>
      </div>
    </div>
  </div>
</template>

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