<template>
  <SettingsItem :label="label">
    <template #default>
      <SelectButton
        :modelValue="model"
        :options="options"
        optionLabel="label"
        optionValue="value"
        :allowEmpty="false"
        @update:modelValue="updateValue"
      />
    </template>
    <template #help>
      <slot/>
    </template>
  </SettingsItem>
</template>

<script setup>
import {computed} from "vue";
import SettingsItem from "@/components/SettingsItem.vue";
import SelectButton from "primevue/selectbutton";

const model = defineModel();
const props = defineProps({
  items: {
    type: Object,
    default: {},
  },
  label: {
    type: String,
    default: '',
  },
});

const options = computed(() => {
  return Object.entries(props.items).map(([value, label]) => ({
    value,
    label,
  }));
});

function updateValue(newValue) {
  model.value = newValue;
}
</script>

<style scoped>

</style>

