<template>
  <div class="craft-tag-selector">
    <div class="pill-grid">
      <button
        v-for="tag in tags"
        :key="tag.slug"
        type="button"
        class="pill"
        :class="{ selected: modelValue.includes(tag.slug) }"
        @click="toggle(tag.slug)"
      >{{ tag.label }}</button>
    </div>
    <div class="suggest-link">
      <span @click="$emit('suggest')">Don't see what you're looking for?</span>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  modelValue: { type: Array, default: () => [] },
  tags: { type: Array, default: () => [] },
});

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

function toggle(slug) {
  const current = [...props.modelValue];
  const idx = current.indexOf(slug);
  if (idx === -1) {
    emit("update:modelValue", [...current, slug]);
  } else {
    current.splice(idx, 1);
    emit("update:modelValue", current);
  }
}
</script>

<style scoped>
.craft-tag-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-faint);
  font-size: 11px;
  font-family: "Commit Mono", monospace;
  cursor: pointer;
  user-select: none;
  transition: all 0.12s;
  white-space: nowrap;
}

.pill:hover {
  color: var(--text-dim);
  border-color: var(--border-d);
}

.pill.selected {
  background: var(--surface);
  color: var(--text-bright);
  border-color: var(--candle);
  border-style: solid;
}

.suggest-link {
  font-size: 10px;
  font-family: "Commit Mono", monospace;
  color: var(--text-faint);
  margin-top: 2px;
}

.suggest-link span {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.suggest-link span:hover {
  color: var(--text-dim);
}
</style>
