<script setup lang="ts">
import type { PageDataResourceGroups } from '#layers/types/api/pageData'

interface Props {
  arrowsData?: PageDataResourceGroups
}

const props = defineProps<Props>()

const { locale } = useI18n()
const { sendLog } = useAnalytics()

const getArrowBgColor = (direction: 'prev' | 'next') => {
  return getColorCodeFromData(
    props.arrowsData?.[direction === 'prev' ? 0 : 1]?.display,
    'none'
  )
}

const handleArrowClick = (direction: 'prev' | 'next') => {
  if (props.arrowsData) {
    const arrowIndex = direction === 'prev' ? 0 : 1
    sendLog(locale.value, props.arrowsData[arrowIndex]?.tracking)
  }
}
</script>

<template>
  <div class="splide__arrows">
    <AtomsButtonCircle
      sr-only="Previous"
      class="splide-arrow splide__arrow--prev"
      :style="{ backgroundColor: getArrowBgColor('prev') }"
      @click="handleArrowClick('prev')"
    >
      <AtomsIconsArrowRightLine color="#ffffff" />
    </AtomsButtonCircle>
    <AtomsButtonCircle
      sr-only="Next"
      class="splide-arrow splide__arrow--next"
      :style="{ backgroundColor: getArrowBgColor('next') }"
      @click="handleArrowClick('next')"
    >
      <AtomsIconsArrowRightLine color="#ffffff" />
    </AtomsButtonCircle>
  </div>
</template>

<style scoped>
.splide__arrow--prev:hover :deep(.icon) {
  @apply -translate-x-[3px];
}

.splide__arrow--next:hover :deep(.icon) {
  @apply translate-x-[3px];
}
</style>
