<template>
  <div class="flex items-center gap-3 text-sm">
    <span class="text-ghost-300 font-medium">{{ label }}:</span>
    <UButtonGroup size="sm" class="privacy-toggle-group">
      <UButton
        :variant="modelValue === 'members' ? 'solid' : 'outline'"
        :color="modelValue === 'members' ? 'blue' : 'neutral'"
        @click="updateValue('members')"
        class="privacy-toggle-btn"
        :class="{ 'is-selected': modelValue === 'members' }"
      >
        Members
      </UButton>
      <UButton
        :variant="modelValue === 'private' ? 'solid' : 'outline'"
        :color="modelValue === 'private' ? 'blue' : 'neutral'"
        @click="updateValue('private')"
        class="privacy-toggle-btn"
        :class="{ 'is-selected': modelValue === '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>

<style scoped>
/* Unselected buttons - lighter background for visibility */
:deep(.privacy-toggle-btn:not(.is-selected)) {
  background-color: rgb(68 64 60) !important; /* ghost-700 equivalent */
  border-color: rgb(87 83 78) !important; /* ghost-600 equivalent */
  color: rgb(214 211 209) !important; /* ghost-300 equivalent */
}

:deep(.privacy-toggle-btn:not(.is-selected):hover) {
  background-color: rgb(87 83 78) !important; /* ghost-600 equivalent */
  border-color: rgb(120 113 108) !important; /* ghost-500 equivalent */
}

/* Selected buttons - bright blue to stand out */
:deep(.privacy-toggle-btn.is-selected) {
  background-color: rgb(59 130 246) !important; /* blue-500 */
  border-color: rgb(59 130 246) !important; /* blue-500 */
  color: white !important;
}

:deep(.privacy-toggle-btn.is-selected:hover) {
  background-color: rgb(37 99 235) !important; /* blue-600 */
  border-color: rgb(37 99 235) !important; /* blue-600 */
}
</style>
