<template>
  <div class="mc-datatable__selection">
    {{ !selectAll ? labelPageSelected : labelAllItemsSelected }}

    <button
      v-if="!selectAll"
      type="button"
      class="mc-datatable__selection-btn"
      @click="$emit('select-all')"
    >
      {{ labelButtonSelectAll }}
    </button>
    <button
      v-else
      type="button"
      class="mc-datatable__selection-btn"
      @click="$emit('clear-all')"
    >
      {{ labelButtonClearSelection }}
    </button>
  </div>
</template>

<script setup>
defineProps({
  selectAll: {
    type: Boolean,
    default: false,
  },
  labelPageSelected: {
    type: String,
    default: undefined,
  },
  labelAllItemsSelected: {
    type: String,
    default: undefined,
  },
  labelButtonSelectAll: {
    type: String,
    default: undefined,
  },
  labelButtonClearSelection: {
    type: String,
    default: 'Clear selection',
  },
});

defineEmits(['select-all', 'clear-all']);
</script>

<style lang="scss">
@import 'settings-tools/all-settings';

.mc-datatable {
  &__selection {
    background: $color-grey-000;
    margin-bottom: $mu050;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: $mu025;
    height: 34px;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    gap: $mu050;

    &-info {
      color: #3a3936;
    }

    &-btn {
      color: $color-primary-01-600; // primary-600
      cursor: pointer;
      background: none;
      border: 0;
      font-style: normal;
      font-family: inherit;
      font-weight: 400;
      padding: 0;
      text-decoration-line: underline;

      &:hover {
        text-decoration-line: none;
      }
    }
  }

  &__main {
    overflow-y: auto;
  }
}
</style>
