<template>
<div class="shadow-classic rounded-md bg-indigo-200 p-3 md:px-5 md:py-7">
    <feed-header :created_at='entity.created_at_humans' :user='user' />

    <div @click.stop="" class="mt-3 md:mt-6 feed-body">
        <div class="mb-3 md:mb-6 text-gray text-sm md:text-base">
            <div @click.stop="">
                {{entity.body}}
            </div>
            <feed-paid-block
                @onReplaceFeed='onReplaceFeed'
                :is_paid='entity.is_paid'
                :user_id='user.id'
                :price='entity.price'
                :feed_id='feed_id'
                :paid_open='entity.paid_open'
            />
        </div>
        <feed-music-body
            :feed_id='feed_id'
            :title='entity.title'
            :preview='entity.preview'
            :medias='entity.collection_medias'
         />
    </div>
    <feed-footer
        @likeFeed='likeFeed'
        :likes='entity.likes'
        :liked='entity.liked'
        :comments='entity.comments'
     />
</div>
</template>

<script>
import FeedHeader from "@/Shared/FeedList/FeedHeader";
import FeedFooter from "@/Shared/FeedList/FeedFooter";
import FeedMusicBody from "@/Shared/FeedList/FeedMusicBody";
import FeedPaidBlock from "@/Shared/FeedList/FeedPaidBlock";

export default {
  components: {
    FeedHeader,
    FeedFooter,
    FeedMusicBody,
    FeedPaidBlock,
  },
  emits: ["likeFeed"],
  props: {
    entity: Object,
    user: Object,
    feed_id: Number,
  },

  methods: {
    onReplaceFeed(data) {
      this.entity.collection_medias = data.collection;
      this.entity.preview = data.preview;
      this.entity.paid_open = 1;
    },
    likeFeed() {
      this.$emit("likeFeed");
    },
  },
};
</script>
