<template>
  <div class="flex items-center gap-2 text-sm">
    <span class="text-gray-600 dark:text-gray-400">{{ label }}:</span>
    <UButtonGroup size="xs">
      <UButton
        :variant="modelValue === 'public' ? 'solid' : 'ghost'"
        :color="modelValue === 'public' ? 'blue' : 'gray'"
        @click="updateValue('public')"
      >
        Public
      </UButton>
      <UButton
        :variant="modelValue === 'members' ? 'solid' : 'ghost'"
        :color="modelValue === 'members' ? 'blue' : 'gray'"
        @click="updateValue('members')"
      >
        Members
      </UButton>
      <UButton
        :variant="modelValue === 'private' ? 'solid' : 'ghost'"
        :color="modelValue === 'private' ? 'blue' : 'gray'"
        @click="updateValue('private')"
      >
        Private
      </UButton>
    </UButtonGroup>
  </div>
</template>

<script setup>
const props = defineProps({
  modelValue: {
    type: String,
    default: 'members'
  },
  label: {
    type: String,
    default: 'Privacy'
  }
})

const emit = defineEmits(['update:modelValue'])

const updateValue = (value) => {
  emit('update:modelValue', value)
}
</script>
