<template>
  <div class="bg-btns">
    <ul>
      <li
        v-for="btn in options"
        :class="{
          'is-active': modelValue === btn.value,
        }"
        :key="btn.value"
        @click="selectBtn(btn)"
      >
        {{ btn.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "BgBtns",
  props: {
    modelValue: {
      type: [String, Number],
      default: "",
    },
    options: {
      type: Array,
      default: () => [],
    },
  },
  emits: ["update:modelValue"],
  methods: {
    selectBtn({ value }) {
      this.$emit("update:modelValue", value);
    },
  },
};
</script>
