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

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

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

  .emoji-bar {
    display: flex;
    border-bottom: 1px solid $color-silver;
    padding: $small-spacing $medium-spacing;
    margin: -$medium-spacing;
    margin-bottom: $medium-spacing;

    &__emoji {
      font-size: toRem(32px);
      margin-right: $medium-spacing;
      display: inline-flex;
      cursor: pointer;
    }

  }

</style>
