<template >
  <div class="button-group">
    <Button 
      v-for="item in buttons"
      :key="item.key"
      :active="item.key === active"
      @click="() => onClickHandler(item)"
    >
    {{item.name}}
    </Button>
  </div>
</template>

<script>
import Button from './Button.vue'

export default {
  name: 'ButtonGroup',
  props: {
    default: {
      type: String
    },
    buttons: {
      type: Array,
      default: () => []
    }
  },
  components: {
    Button
  },
  data() {
    return {
      active: this.default || this.buttons[0].key
    }
  },
  methods: {
    onClickHandler(item) {
      this.active = item.key
      this.$emit('click', item)
    }
  }
}
</script>

<style scoped lang='less'>
.button-group {
  display: flex;
  align-items: center;
  .custom-button {
    margin-right: 5px;
  }
}
</style>
