<template>
  <view class="emoji-picker">
    <view class="emoji-list">
      <text
        v-for="(emoji, idx) in emojis"
        :key="idx"
        class="emoji-item"
        @click="selectEmoji(emoji)"
      >{{ emoji }}</text>
    </view>
  </view>
</template>

<script>
import emojis from '@/common/emojis.js';
export default {
  name: 'EmojiPicker',
  data() {
    return {
      emojis
    };
  },
  methods: {
    selectEmoji(emoji) {
      this.$emit('select', emoji);
    }
  }
};
</script>

<style scoped>
.emoji-picker {
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 16rpx;
  width: 100%;
}
.emoji-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}
.emoji-item {
  font-size: 48rpx;
  padding: 12rpx;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
  border-radius: 6rpx;
}
.emoji-item:active {
  background: #f0f2f6;
}
</style> 