<template>
  <div class="l-pagination">
    <l-button
      size="small"
      type="primary"
      :shade="disablePrevious ? 300 : 500"
      :disabled="disablePrevious"
      outline
      @click="goToPreviousPage"
    >
      <l-icon><icon-tri-left /></l-icon>Previous page
    </l-button>
    <l-button
      size="small"
      type="primary"
      :shade="disableNext ? 300 : 500"
      :disabled="disableNext"
      outline
      @click="goToNextPage"
      >Next page
      <l-icon><icon-tri-right /></l-icon>
    </l-button>
  </div>
</template>

<script>
import LButton from "../atoms/LButton.vue";
import LIcon from "../atoms/LIcon.vue";
import IconTriRight from "../../icons/icon-tri-right.vue";
import IconTriLeft from "../../icons/icon-tri-left.vue";
export default {
  name: "l-pagination",
  components: {
    LButton,
    LIcon,
    IconTriRight,
    IconTriLeft,
  },
  props: {
    // Number of pages to loop through and display
    pages: {
      type: Number,
      required: true,
    },
    // Page currently on display
    currentPage: {
      type: Number,
      required: true,
    },
  },
  computed: {
    disablePrevious() {
      return this.currentPage === 1;
    },
    disableNext() {
      return this.currentPage === this.pages;
    },
  },
  methods: {
    goToNextPage() {
      this.$emit("goToNextPage");
    },
    goToPreviousPage() {
      this.$emit("goToPreviousPage");
    },
  },
};
</script>

<style>
.l-pagination {
  display: flex;
  gap: var(--spacing-2);
}
</style>
