<template>
  <div>
    <img src="@/assets/images/ButtonLeft.png" tabindex="0" @click="scrollLr('left')" />
    <slot />
    <img src="@/assets/images/ButtonRight.png" tabindex="0" @click="scrollLr('right')" />
  </div>
</template>

<script setup lang="ts">

const emit = defineEmits([ 'left','right' ])
const props = defineProps({
  scrollRect: {
    type: Object,
    default: null
  },
  scrollWidth: {
    type: Number,
    default: 200
  }
})

function scrollLr(direction: 'left' | 'right') {
  const scrollRect = props.scrollRect;
  if (!scrollRect) {
    emit(direction)
    return
  }
  const scrollWidth = props.scrollWidth;
  const scrollContainer = scrollRect.getScrollContainer() as HTMLElement;
  if (direction === 'left') {
    scrollContainer.scrollTo({ 
      left: scrollContainer.scrollLeft - scrollWidth, 
      behavior: 'smooth',
    });
  } else {
    scrollContainer.scrollTo({ 
      left: scrollContainer.scrollLeft + scrollWidth, 
      behavior: 'smooth',
    });
  }
}
</script>

<style lang="scss" scoped>
img {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  margin: 0 20px;
  cursor: pointer;

  &:active {
    transform: scale(0.9);
  }
  &:focus {
    outline: 2px solid #444;
  }
}
</style>