<template>
  <div class="emoji-bar">
    <a
      class="emoji-bar__emoji"
      data-cy="emoji-button"
      v-for="(emoji, index) in emojis"
      :key="index"
      @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>
