<template>
  <div
    class="row"
    test-id="responsiveActionButtons"
  >
    <q-btn
      square
      class="bg-k-positive text-k-white col q-py-lg"
      :label="$t('confirm')"
      style="margin: 0; padding: 0; padding-block: 1rem"
      :disable="selected.length === 0"
      test-id="confirmResponsiveActionButton"
      @click="emits('onConfirmSelection')"
    />
    <q-btn
      square
      class="bg-k-negative text-k-white col q-py-lg"
      :label="$t('cancel')"
      style="margin: 0; padding: 0; padding-block: 1rem"
      test-id="cancelResponsiveActionButton"
      @click="emits('onCancelSelection')"
    />
  </div>
</template>
<script setup>
defineProps({
  selected: {
    type: Array,
    default: () => []
  }
})
const emits = defineEmits(['onConfirmSelection', 'onCancelSelection'])
</script>
