<script setup>
import { ref } from 'vue';

defineEmits(['select']);

const emojiList = ref([
  '😀',
  '😃',
  '😄',
  '😁',
  '😆',
  '😅',
  '😂',
  '🤣',
  '😊',
  '😇',
  '🙂',
  '🙃',
  '😉',
  '😌',
  '😍',
  '🥰',
  '😘',
  '😗',
  '😙',
  '😚',
  '😋',
  '😛',
  '😝',
  '😜',
  '🤪',
  '🤨',
  '🧐',
  '🤓',
  '😎',
  '🤩',
  '🥳',
  '😏',
  '😒',
  '😞',
  '😔',
  '😟',
  '😕',
  '🙁',
  '☹️',
  '😣',
  '😖',
  '😫',
  '😩',
  '🥺',
  '😢',
  '😭',
  '😤',
  '😠',
  '😡',
  '🤬',
  '🤯',
  '😳',
  '🥵',
  '🥶',
  '😱',
  '😨',
]);
</script>

<template>
  <div
    class="emoji-picker-container max-w-xs rounded-lg border border-gray-200 bg-white p-3 shadow-lg dark:border-gray-600 dark:bg-gray-700"
  >
    <div class="grid max-w-xs grid-cols-8 gap-2">
      <div
        v-for="emoji in emojiList"
        :key="emoji"
        class="flex h-8 w-8 cursor-pointer items-center justify-center rounded text-lg transition-all hover:scale-110 hover:bg-gray-100 dark:hover:bg-gray-600"
        @click="$emit('select', emoji)"
      >
        {{ emoji }}
      </div>
    </div>
  </div>
</template>
