<template>
  <div class="l-w-36 l-rounded-lg bg">
    <div
      class="l-w-full l-flex l-py-2 l-px-4 "
      :class="{
        'l-justify-between': !isFirstPage && !isLastPage,
        'l-justify-center': isFirstPage || isLastPage
      }
    ">
      <div
        v-if="!isFirstPage"
        class="l-w-16 l-flex l-justify-center l-align-center l-cursor-pointer"
        @click="$emit('previous')"
      >
        <LeftArrow
          class="l-text-white l-fill-current"
        />
      </div>
      <div
        v-if="!isLastPage"
        class="l-w-16 l-flex l-justify-center l-align-center l-cursor-pointer"
        @click="$emit('next')"
      >
        <RightArrow
          class="l-text-white l-fill-current l-cursor-pointer"
        />
      </div>
    </div>
  </div>
</template>

<script setup="{ emit }">
import { computed } from 'vue'
import LeftArrow from '../../assets/left_arrow.svg'
import RightArrow from '../../assets/right_arrow.svg'

const props = defineProps({
  currentIndex: Number,
  totalReviews: Number,
  theme: Object,
})

const emit = defineEmits(['previous', 'next'])

const isFirstPage = computed(() => props.currentIndex === 0)
const isLastPage = computed(() => props.currentIndex === props.totalReviews || props.currentIndex === (props.totalReviews - 3))
</script>

<style scoped>
.bg {
  background-color: v-bind(theme?.rating_stars_color);
}
</style>