<template>
  <div class="navigation z-[2] flex gap-24 items-center tablet:gap-16">
    <button
      class="button group after:content-none flex items-center justify-center w-56 h-56 bg-white rounded-48 transition-colors"
      @click="prevSlide">
      <img
        :src="arrowIcon"
        width="9"
        height="16"
        class="icon rotate-180 contrast-[1000%] grayscale group-hover:contrast-100 group-hover:grayscale-0" />
    </button>
    <button
      class="button group after:content-none flex items-center justify-center w-56 h-56 bg-white rounded-48 transition-colors"
      @click="nextSlide">
      <img :src="arrowIcon" width="9" height="16" class="icon contrast-[1000%] grayscale group-hover:contrast-100 group-hover:grayscale-0" />
    </button>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { Splide } from '@splidejs/splide';
import arrowIcon from '@/assets/img/static-icons/arrow/arrow-right-orange.svg?url';

export default defineComponent({
  props: {
    splide: {
      type: Object as PropType<Splide>,
      default: () => ({}),
    },
  },

  data: () => ({
    arrowIcon,
  }),

  methods: {
    prevSlide() {
      this.splide.go('<');
    },
    nextSlide() {
      this.splide.go('>');
    },
  },
});
</script>

