<template>
  <div
    :class="['wrapper-pagination', { 'no-border': type.includes('double') }]"
  >
    <button
      :disabled="linkDisabled"
      :class="['pagination-button', { disabled: linkDisabled }]"
    >
      <i
        v-if="type.length"
        :class="`bi bi-chevron-${type} chevron`"
        @click="triggerPagination"
      ></i>
    </button>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
const emit = defineEmits<{ (e: 'trigger', value: string): void }>()

const props = defineProps({
  href: { type: String, default: null },
  selfLink: { type: Object, default: {} },
  type: { type: String, default: '' }
})

const linkDisabled = computed((): boolean => {
  return (
    (props.type === 'double-left' || props.type === 'double-right') &&
    props.href === props.selfLink.href
  )
})

function triggerPagination(): void {
  if (linkDisabled.value) return
  emit('trigger', props.href)
}
</script>

<style lang="scss" scoped>
.wrapper-pagination {
  border: toRem(0.1) solid var(--black);
  border-radius: 50%;
  background-color: var(--blue-pale);
  height: toRem(3);
  width: toRem(3);
  display: flex;
  &:first-child {
    margin-right: toRem(2);
  }
  &:last-child {
    margin-left: toRem(2);
  }
  &:nth-child(2) {
    margin-right: toRem(1);
  }
  &:nth-child(3) {
    margin-left: toRem(1);
  }
}
.pagination-button {
  background-color: transparent;
  border: none;
  font-size: toRem(1.7);
  width: 100%;
  display: flex;
  align-items: center;
  .chevron {
    width: toRem(3.5);
  }
}
.no-border {
  border: none;
  background-color: transparent;
}
.disabled {
  cursor: default;
  pointer-events: unset;
}
</style>
