<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 setup>
const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: "",
  },
  options: {
    type: Array,
    default: () => [],
  },
});
const emit = defineEmits(["update:modelValue"]);

const selectBtn = ({ value }) => {
  emit("update:modelValue", value);
};
</script>
