<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    options: Array<string | number>
    modelValue?: string | number
    activeValues?: Array<string | number>
    keyPrefix?: string
    compact?: boolean
    suffix?: string
  }>(),
  {
    modelValue: undefined,
    activeValues: () => [],
    keyPrefix: '',
    compact: false,
    suffix: '',
  },
)

const emit = defineEmits<{
  'update:modelValue': [value: string | number]
  select: [value: string | number]
}>()

function isActive(value: string | number) {
  return props.activeValues.includes(value) || props.modelValue === value
}

function selectValue(value: string | number) {
  emit('update:modelValue', value)
  emit('select', value)
}
</script>

<template>
  <div class="chip-group" :class="{ compact }">
    <button
      v-for="option in options"
      :key="`${keyPrefix}${option}`"
      type="button"
      class="chip"
      :class="{ active: isActive(option) }"
      @click="selectValue(option)"
    >
      {{ option }}{{ suffix }}
    </button>
  </div>
</template>

<style scoped>
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.chip-group.compact {
  align-items: center;
  min-height: 32px;
}

.chip {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid #d6dce5;
  border-radius: 15px;
  background: #fff;
  color: #596474;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.chip.active {
  border-color: #ff6a00;
  background: #ff6a00;
  color: #fff;
}
</style>
