<template>
  <div class="cpTableFooterMobile">
    <cp-button
      appearance="tertiary"
      color="neutral"
      :disabled="!isPreviousEnabled"
      is-square
      size="sm"
      @click="emit('onPreviousClick')"
    >
      <template #leading-icon>
        <cp-icon size="16" type="arrow-left" />
      </template>
    </cp-button>
    <div class="cpTableFooterMobile__results">
      <slot name="footer-details" />
    </div>
    <cp-button
      appearance="tertiary"
      color="neutral"
      :disabled="!isNextEnabled"
      is-square
      size="sm"
      @click="emit('onNextClick')"
    >
      <template #leading-icon>
        <cp-icon size="16" type="arrow-right" />
      </template>
    </cp-button>
  </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">
.cpTableFooterMobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cp-spacing-xs) var(--cp-spacing-xl);
  border-radius: var(--cp-radius-md);
  background: var(--cp-background-primary);
  box-shadow: var(--cp-shadows-overlay);
  font-size: var(--cp-text-size-sm);
  gap: var(--cp-spacing-md);

  .cpButton--isDisabled {
    background: var(--cp-background-primary);
  }
}
</style>
