<template>
  <div
    :class="[
      liked ? 'text-red' : 'text-gray-light',
      'flex items-center',
    ]"
  >
    <button class="default" @click.stop="likeFeed">
      <svg class="w-5 h-5 flex-shrink-0">
        <use xlink:href="#heart"></use>
      </svg>
    </button>
    <span v-show="likes" class="ml-2 text-sm">{{
      likes
    }}</span>
  </div>
</template>

<script>
export default {
    props: {
        likes: Number,
        liked: Boolean,
    },
    emits: ['likeFeed'],
    methods: {
        likeFeed() {
            this.$emit('likeFeed')
        },
    },
}
</script>
