<template>
  <div class="d-flex flex-column-reverse flex-lg-row gap-3">
    <v-tabs
      :value="value"
      :grow="grow"
      height="56"
      background-color="transparent"
      show-arrows
      @change="$emit('input', $event)">
      <v-tab
        v-for="item in items"
        :key="item.label"
        :to="item.to"
        :ripple="false"
        class="text-h3-headline text-none"
        exact-path>
        <v-icon
          v-if="item.icon"
          left>
          {{ item.icon }}
        </v-icon>
        {{ item.label }}
      </v-tab>
    </v-tabs>
    <div
      v-if="$scopedSlots[`action`]"
      class="d-flex align-center gap-3">
      <slot name="action"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Number],
      default: 0
    },
    items: {
      type: Array,
      default: () => ([])
    },
    grow: Boolean
  }
}
</script>

<style lang="scss" scoped>
.v-tabs {
  display: flex;
  align-items: flex-end;
  width: auto;
  ::v-deep .v-tab {
    background-color: #ececec;
    margin-right: 8px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    min-width: 197px;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    overflow: hidden;
  }
  ::v-deep .v-tab:not(.v-tab--active) {
    color: var(--v-secondary-base) !important;
  }
  ::v-deep .v-tab--active {
    background-color: white;
    color: var(--v-primary-base);
    font-weight: 600;
    &:before {
      opacity: 0 !important;
    }
  }
  ::v-deep .v-tabs-slider-wrapper {
    display: flex;
    justify-content: center;
  }
  ::v-deep .v-tabs-slider {
    width: 85%;
  }
}

</style>
