<script setup lang="ts">
// Mirror of project/platform-screens.jsx `FilterChip` (line 770) — a chip-like
// button with a dropdown of options. Closes on outside click. Used in the
// users / audit / channels toolbars.

interface Opt { value: string; label: string }
const props = defineProps<{ label: string; modelValue: string; options: Opt[] }>()
const emit = defineEmits<{ 'update:modelValue': [string] }>()

const open = ref(false)
const current = computed(() => props.options.find((o) => o.value === props.modelValue))

function pick(v: string) {
  emit('update:modelValue', v)
  open.value = false
}
</script>

<template>
  <div class="wrap">
    <button class="chip" @click="open = !open">
      <span class="lab">{{ label }}:</span>
      <span class="val">{{ current?.label || 'All' }}</span>
      <UiIcon name="chevDown" :size="12" stroke="var(--text-mute)" />
    </button>
    <template v-if="open">
      <div class="scrim" @click="open = false" />
      <div class="menu">
        <button v-for="o in options" :key="o.value" class="row" @click="pick(o.value)">
          {{ o.label }}
          <UiIcon v-if="o.value === modelValue" name="check" :size="13" />
        </button>
      </div>
    </template>
  </div>
</template>

<style scoped>
.wrap { position: relative; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}
.lab {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-mute);
}
.val { font-weight: 500; }
.scrim { position: fixed; inset: 0; z-index: 40; }
.menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  min-width: 160px;
  padding: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  z-index: 50;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  border-radius: 4px;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}
.row:hover { background: var(--surface); }
</style>
