<template>
  <div class="item pt-3">
    <v-chip
      v-for="(item, index) in items"
      :key="index"
      color="#e3ecf7"
      class="mb-3"
      :class="{'mr-3': index !== items?.length - 1}"
      :style="{color: item.scrollChipSetGrey ? '#1867c0b3' : '#1867C0'}"
      @click="$emit('handleClick', item, index)"
    >
      <strong>{{ item.label || item.title || item[chipLabelName] }}</strong>
    </v-chip>
  </div>
  <!-- <v-tabs hide-slider color="rgba(0,0,0,0)">
    <v-tab v-for="item in items" :key="item.label" class="item">
      <v-chip
        color="#e3ecf7"
        style="color: #1867C0;"
        @click="$emit('handleClick', item)"
      >
        {{ item.label }}
      </v-chip>
    </v-tab>
  </v-tabs> -->
</template>

<script>
export default {
  name: 'scroll-tabs',
  props: {
    items: {
      type: Array,
      default: () => []
    },
    chipLabelName: {
      type: String,
      default: 'label'
    }
  }
}
</script>

<style lang="scss" scoped>
.item {
  // padding: 0 8px;
  flex-shrink: 0;
  cursor: auto;
  &:focus {
    color: inherit !important;
  }
}
</style>
