<template>
  <div>
    <span
      :key="index"
      class="emojis__emoji"
      data-cy="emoji-button"
      v-for="(emoji, index) in emojis"
      @click="$emit('add-emoji', emoji)">{{ emoji }}</span>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        emojis: ['🖐️', '👍', '👎', '👏', '👋', '🎉', '😍', '😮', '🤔'],
      };
    }
  };
</script>

<style scoped lang="scss">
  @import '~styles/helpers';

</style>
