<script setup>
const props = defineProps({
  options: Array,
  modelValue: String,
})
const emits = defineEmits(['update:model-value'])
let value = $ref(props.modelValue)

function handleClick(item) {
  value = item.v
  emits('update:model-value', item.value)
}
</script>

<template>
  <div class="grid grid-cols-4 gap-2 text-sm">
    <div
      v-for="item in options" :key="item.v"
      class="h-40px rounded-sm flex_center"
      :class="value === item.v ? 'bg-hex-00A3FF text-hex-fff' : 'bg-hex-f4f4f5 text-hex-949494'" @click="handleClick(item)"
    >
      {{ item.n }}
    </div>
  </div>
</template>
