<template>
  <div
    :class="{'fl-switcher-item': true, active: active}"
    v-on="$listeners"
    @click="setActiveItem"
  >
    {{ label }}
  </div>
</template>

<script>
export default {
  name: 'FlSwitcherItem',
  props: {
    label: {
      type: String,
      default: 'Text'
    },

    activeInit: {
      type: Boolean,
      default: false
    }
  },

  data () {
    return {
      active: false
    }
  },

  mounted () {
    this.active = this.activeInit
  },

  methods: {
    setActiveItem () {
      this.active = !this.active
      this.$parent.$emit('activeItem', this)
    }
  }
}
</script>

<style scoped lang="scss">
  .fl-switcher-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    overflow: hidden;
    color: $black-01;
    font-size: 16px;
    font-family: $main-ff;
    text-align: center;
    border: solid 1px $grey-01;
    border-right: initial;

    &:hover {
      color: $primary;
    }

    @include media-max-md {
      height: 26px;
      padding: 2px 5px;
      font-size: 14px;
    }
  }

  .active {
    color: $primary;
    background: $grey-03;

    &:hover {
      color: $primary;
    }
  }
</style>
