<template>
  <div class="cpTableFooterDetails">
    <p v-if="numberOfResults" class="cpTableFooterDetails__label">
      <span class="cpTableFooterDetails__paginationLabel">
        {{ paginationLabel }}
      </span>
      <span class="cpTableFooterDetails__resultsCount"> / {{ paginationResultsDetails }}</span>
    </p>
    <p v-else class="cpTableFooterDetails__noResults">No results</p>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  numberOfResults: number
  pageFirstResultIndex: number
  pageLastResultIndex: number
}

const props = defineProps<Props>()

const paginationLabel = computed(() => {
  return `${props.pageFirstResultIndex} – ${props.pageLastResultIndex}`
})

const paginationResultsDetails = computed(() => {
  const formattedNumberOfResults = new Intl.NumberFormat('en-US').format(props.numberOfResults)
  const pluralizedCount = props.numberOfResults > 1 ? 'results' : 'result'
  return `${formattedNumberOfResults} ${pluralizedCount}`
})
</script>

<style lang="scss">
.cpTableFooterDetails {
  &__paginationLabel {
    color: var(--cp-text-primary);
    font-size: var(--cp-text-size-xs);
    font-weight: 600;
    line-height: var(--cp-line-height-xs);
  }

  &__resultsCount,
  &__noResults {
    color: var(--cp-text-secondary);
    font-size: var(--cp-text-size-xs);
    font-weight: 500;
    line-height: var(--cp-line-height-xs);
  }
}

@media (min-width: 650px) {
  .cpTableFooterDetails {
    &__paginationLabel,
    &__resultsCount,
    &__noResults {
      font-size: var(--cp-text-size-sm);
      line-height: var(--cp-line-height-sm);
    }
  }
}
</style>
