<script setup lang="ts">
const props = withDefaults(defineProps<{
  shown: number
  total?: number | null
  canLoadMore?: boolean
  loading?: boolean
  pageSize?: number
  itemLabel?: string
}>(), {
  total: null,
  canLoadMore: false,
  loading: false,
  pageSize: 12,
  itemLabel: 'элементов',
})

const emit = defineEmits<{
  loadMore: []
}>()

const summaryText = computed(() => {
  if (typeof props.total === 'number') {
    return `Показано ${props.shown} из ${props.total} ${props.itemLabel}`
  }

  return `Загружено ${props.shown} ${props.itemLabel}`
})

const buttonText = computed(() => props.loading ? 'Загружаем...' : `Загрузить ещё ${props.pageSize}`)
</script>

<template>
  <div class="flex flex-col items-center gap-3 rounded-[28px] bg-white/82 px-5 py-5 text-center text-sm text-[#6f6353] shadow-none">
    <p>{{ summaryText }}</p>
    <button
      v-if="canLoadMore"
      type="button"
      class="btn rounded-full border-0 bg-[#2f2418] px-6 text-white hover:bg-[#493824]"
      :disabled="loading"
      @click="emit('loadMore')"
    >
      <span v-if="loading" class="loading loading-spinner loading-sm" />
      {{ buttonText }}
    </button>
  </div>
</template>
