<template>
  <legend v-if="$slots.default" class="col-auto text-capitalize fs-6 mb-0">
    <slot></slot>
  </legend>
  <div class="col-auto">
    <form
      :id="group_name + '-input'"
      class="btn-group"
      role="group"
      :aria-label="'Select' + group_name"
      @click="callback"
    >
      <RadioButton
        v-for="(label, index) in label_list"
        :key="index"
        :group_label="group_name"
        :value="index"
        :is_checked="index == checked_index"
      >
        {{ label }}
      </RadioButton>
    </form>
  </div>
</template>

<script>
import RadioButton from "./RadioButton.vue";

export default {
  name: "ModeSelect",
  props: {
    group_name: String,
    label_list: Array,
    checked_index: {
      type: Number,
      default: 0,
    },
    callback: Function,
  },
  components: {
    RadioButton,
  },
};
</script>
