<script setup lang="ts">
defineOptions({
  name: 'UiDataTableToolbar',
});

defineSlots<{
  /** Primary controls, usually search and column filters. */
  default(): unknown;
  /** Trailing controls, usually view options or reset actions. */
  actions?(): unknown;
}>();
</script>

<template>
  <div
    class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between"
  >
    <div
      class="flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center"
    >
      <slot />
    </div>
    <div v-if="$slots.actions" class="flex shrink-0 items-center gap-2">
      <slot name="actions" />
    </div>
  </div>
</template>
