<template>
  <Stack v-if="total > 0" gap="2" align="center" justify="center">
    <Text tone="muted">
      {{ t('common.pagination.showing', { shown, total }) }}
    </Text>
    <Button
      v-if="canLoadMore"
      variant="outline"
      @click="$emit('load-more')"
      :disabled="loading"
    >
      {{ t('common.actions.load_more') }}
    </Button>
  </Stack>
</template>

<script setup lang="ts">
const props = defineProps<{
  shown: number
  total: number
  canLoadMore: boolean
  loading?: boolean
}>()

defineEmits<{
  (e: 'load-more'): void
}>()

const { t } = useI18n()
</script>
