<template>
  <div class="cpTableFooterDesktop">
    <div class="cpTableFooterDesktop__details">
      <div class="cpTableFooterDesktop__results">
        <slot name="footer-details" />
      </div>
    </div>
    <div class="cpTableFooterDesktop__pagination">
      <cp-button
        appearance="secondary"
        color="neutral"
        :disabled="!isPreviousEnabled"
        is-square
        size="xs"
        @click="emit('onPreviousClick')"
      >
        Prev.
      </cp-button>
      <cp-button
        appearance="secondary"
        color="neutral"
        :disabled="!isNextEnabled"
        is-square
        size="xs"
        @click="emit('onNextClick')"
      >
        Next
      </cp-button>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  isNextEnabled: boolean
  isPreviousEnabled: boolean
}

interface Emits {
  (evt: 'onNextClick' | 'onPreviousClick'): void
}

defineProps<Props>()

const emit = defineEmits<Emits>()
</script>

<style scoped lang="scss">
.cpTableFooterDesktop {
  display: flex;
  align-items: center;
  font-size: var(--cp-text-size-sm);

  &__details,
  &__pagination {
    flex: 1;
  }

  &__results {
    color: var(--cp-text-secondary);
    font-variant-numeric: tabular-nums;
  }

  &__results strong {
    color: var(--cp-text-primary);
  }

  &__pagination {
    display: flex;
    justify-content: flex-end;
    gap: var(--cp-spacing-md);
  }
}
</style>
