<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 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"
      @click="handleArrowClick('prev')"
    />
    <AtomsButtonCircle
      sr-only="Next"
      class="splide-arrow splide__arrow--next"
      @click="handleArrowClick('next')"
    />
  </div>
</template>
