<template>
  <div class="ButtonGroup z-2">
    <button
      v-for="(button, index) in buttons"
      @click="click(index)"
      :class="{ 'active': button.active}"
    >
      <Icon :name="button.icon" mode="svg" />
      <span>{{ button.label }}</span>
    </button>
  </div>
</template>

<script setup lang="ts">
import type { Button } from '../../../shared/ButtonGroup'

type Props = {
  buttons: Button[]
}

defineProps<Props>()
const emit = defineEmits(['click'])

const click = (index : number) => emit('click', index)
</script>