<template>
  <b-col
    ref="content"
    class="d-flex align-items-center data-tab"
    @wheel.prevent="wheelItBetter($event)"
  >
    <span
      v-for="item in slots"
      :key="item.id"
      :class="{ 'tab-active': currentSlot === item.id }"
      @click="switchTab(item.id)"
      >{{ item.id }}</span
    >
  </b-col>
</template>

<script>
export default {
  props: {
    slots: {
      type: Array,
      default: null,
    },
    currentSlot: {
      type: String,
      default: null,
    },
    switchTab: {
      type: Function,
      required: true,
    },
  },
  data() {
    return {
      container: this.$refs.content,
    };
  },
  methods: {
    wheelItBetter(event) {
      if (event.deltaY < 0) {
        this.$refs.content.scrollLeft -= 25;
      } else {
        this.$refs.content.scrollLeft += 25;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.data-tab {
  height: 48px;
  max-width: 150%;
  width: auto;
  margin: -2rem -1.95rem 0px -2rem;
  padding-left: 2rem;
  overflow-x: auto;
  @include media-breakpoint-down(md) {
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: -0.95rem;
  }
  border-bottom: 1px solid $gray-10;
  gap: 24px;
}

.tab-active {
  color: $primary;
  transition: ease-in 0.15s;
}
</style>
