<template>
  <div class="priv segmented">
    <span
      v-for="opt in options"
      :key="opt.value"
      :class="{ on: modelValue === opt.value }"
      @click="$emit('update:modelValue', opt.value)"
      >{{ opt.label }}</span
    >
  </div>
</template>

<script setup>
defineProps({
  modelValue: { type: String, default: "public" },
});

defineEmits(["update:modelValue"]);

const options = [
  { label: "Public", value: "public" },
  { label: "Members", value: "members" },
  { label: "Private", value: "private" },
];
</script>

<style scoped>
.priv {
  display: inline-flex;
  gap: 0;
  font-size: 9px;
  font-family: "Commit Mono", monospace;
  letter-spacing: 0.02em;
}

.priv span {
  padding: 2px 7px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
  color: var(--text-faint);
  cursor: pointer;
  transition: all 0.12s;
  user-select: none;
  white-space: nowrap;
  position: relative;
}

.priv span + span {
  margin-left: -1px;
}

.priv span:hover {
  color: var(--text-dim);
}

.priv span.on {
  background: var(--surface);
  color: var(--text-bright);
  border-color: var(--candle);
  border-style: solid;
  z-index: 1;
}
</style>
