<template>
  <div class="row items-center full-height float-right">
    <TableTopDesktopActionButtons
      :selected="selected"
      :selection="selection"
      :page-actions="pageActions"
      @active-action="(params) => emits('activeAction', params)"
      @on-cancel-selection="() => emits('onCancelSelection')"
      @on-confirm-selection="() => emits('onConfirmSelection')"
      @toggle-column-drawer="() => emits('toggleColumnDrawer')"
    />
  </div>
</template>
<script setup>
import TableTopDesktopActionButtons from './TableTopDesktopActionButtons.vue'
defineProps({
  /** Data of all columns */
  columns: { type: Array, required: true },
  /** Color of the header */
  headerColor: {
    type: String,
    default: '#e3ddd6'
  },
  /** Selection type */
  selection: {
    type: String,
    default: 'none'
  },
  /** List of action of current page */
  pageActions: {
    type: Array,
    required: true
  },
  /** Array of selected rows */
  selected: {
    type: Array,
    required: true
  }
})
const emits = defineEmits(['activeAction', 'onCancelSelection', 'onConfirmSelection', 'toggleColumnDrawer'])

</script>
<style></style>
