<template>
    <div class="pagination d-flex justify-content-end">
        <div
            :class="{'pagination__item-highlight': false}"
            class="pagination__item-container">
            <button
                @click="pageChange(previousPageCursor)"
                class="pagination__item px-2"
                :disabled="!previousPageCursor">
                <i
                    class="fa fa-chevron-left mr-2"
                    :aria-hidden="true"/>
                Previous
            </button>
        </div>

        <div
            :class="{'pagination__item-highlight': false}"
            class="pagination__item-container">
            <button
                @click="pageChange(nextPageCursor)"
                class="pagination__item px-2"
                :disabled="!nextPageCursor">
                Next
                <i class="fa fa-chevron-right ml-2"
                   :aria-hidden="true"/>
            </button>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        recordsPerPage: {
            type: Number,
            default: 10,
        },
        nextPageCursor: {
            type: String,
            require: true,
        },
        previousPageCursor: {
            type: String,
            require: true,
        },
    },
    data() {
        return {
            goToInputText: '',
        }
    },
    computed: {
        pages() {
            return Math.ceil(this.count / this.recordsPerPage) || 1
        },
    },
    methods: {
        pageChange(cursor) {
            return this.$emit('page-change', cursor)
        },
    },
}
</script>
