<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 items-center">
      <template v-if="ads == false">
        <like-count :likes="likes" :liked="is_like"
                    @likeFeed="callLike"
        />
        <comment-count :comments="comments" />
      </template>
      <span v-else class="text-gray-light">Реклама</span>
      <view-count :count="count" />
    </div>
  </div>
</template>

<script>
import { Inertia } from '@inertiajs/inertia'
import LikeCount from '@/Shared/Misc/LikeCount.vue'
import ViewCount from '@/Shared/Misc/ViewCount.vue'
import CommentCount from '@/Shared/Misc/CommentCount.vue'
export default {
    components: {
        LikeCount,
        CommentCount,
        ViewCount,
    },
    props: {
        likes: Number,
        comments: Number,
        is_like: Boolean,
        ads: {
            type: Boolean,
            default: false
        },
        count: {
            type: Number,
            default: 0
        },
    },
    emits: ['likeFeed'],
    methods: {
        callLike() {
            if (this.$page.props.auth.user) {
                this.$emit('likeFeed')
            }else{
                Inertia.get(route('login'))
            }
        },
    },
}
</script>
