<template>
  <div class="page-toolbar">
    <slot name="prefix" />

    <UiSearch
      class="flex-1"
      size="large"
      :label="searchLabel"
      :model-value="search"
      @update:model-value="$emit('update:search', $event)"
    />

    <slot />
  </div>
</template>

<script setup>
defineProps({
  searchLabel: { type: String, required: true },
  search: { type: String },
})

defineEmits(['update:search'])
</script>

<style lang="scss">
.page-toolbar {
  display: flex;
  gap: 16px;
  align-items: center;
}
</style>
