<template>
  <div class="flex items-center gap-3 text-sm">
    <span class="text-gray-700 dark:text-guild-400 text-xs font-medium"
      >{{ label }}:</span
    >
    <div class="flex items-center gap-2">
      <span
        class="text-xs transition-colors"
        :class="
          isPrivate
            ? 'text-gray-500 dark:text-guild-500'
            : 'text-blue-600 dark:text-blue-400 font-semibold'
        "
      >
        Members
      </span>
      <USwitch
        :model-value="isPrivate"
        @update:model-value="togglePrivacy"
        color="primary"
        size="md"
      />
      <span
        class="text-xs transition-colors"
        :class="
          isPrivate
            ? 'text-blue-600 dark:text-blue-400 font-semibold'
            : 'text-gray-500 dark:text-guild-500'
        "
      >
        Private
      </span>
    </div>
  </div>
</template>

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

const emit = defineEmits(["update:modelValue"]);

const isPrivate = computed(() => props.modelValue === "private");

const togglePrivacy = (value) => {
  emit("update:modelValue", value ? "private" : "members");
};
</script>
