<template>
  <div
    class="
      transition-opacity
      ease-out
      flex
      items-center
      justify-center
      opacity-0
      group-hover:opacity-100
      bg-indigo-300 bg-opacity-75
      z-10
      absolute
      inset-x-0
      bottom-0
      p-2
      md:p-3
    "
  >
    <div class="misc-info flex space-x-4">
      <div :class="[is_like ? 'text-red' : 'text-gray-light', 'flex items-center']">
        <button @click.stop="$emit('likeFeed')" class="default">
          <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>

      <div class="flex items-center text-gray-light">
        <button class="default">
          <svg class="w-5 h-5 flex-shrink-0">
            <use xlink:href="#message-circle"></use>
          </svg>
        </button>
        <span v-show="comments" class="ml-2 text-sm">{{
          comments
        }}</span>
      </div>
    </div>

    <div class="hidden count-views">
      <div class="flex items-center text-gray-light">
        <span class="mr-2 text-sm">1000</span>
        <svg class="w-5 h-5 flex-shrink-0">
          <use xlink:href="#eye"></use>
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  emits: ["likeFeed"],
  props: {
    likes: Number,
    comments: Number,
    is_like: Boolean,
  },
};
</script>
