<template>
<section>
    <h2 class="text-base text-gray font-semibold">Превью:</h2>
     <div class="mt-3 grid grid-cols-2 sm:grid-cols-3  gap-2 lg:gap-4">
        <div v-for="common_media in purchase.common_medias" :key="common_media.id">
            <div data-fancybox="preview" :data-src="common_media.url" class="cursor-pointer">
                <img :src="common_media.url" class="w-full h-36 md:h-72 object-cover" alt="">
            </div>
            <a :href="common_media.url" download class="hover:text-orange transition-colors mt-2 text-gray-light text-sm">Скачать</a>
        </div>
     </div>
</section>

<section class="mt-6">
    <h2 class="text-base text-gray font-semibold">Медиа материалы:</h2>
     <div class="mt-3 grid grid-cols-2 sm:grid-cols-3  gap-2 lg:gap-4">
        <div v-for="paid_media in purchase.paid_medias" :key="paid_media.id">
           <div data-fancybox="paid" :data-src="paid_media.url" class="cursor-pointer">
                <img :src="paid_media.url" class="w-full h-36 md:h-72 object-cover" alt="">
           </div>
            <a :href="paid_media.url" download class="hover:text-orange transition-colors mt-2 text-gray-light text-sm">Скачать</a>
        </div>
     </div>
</section>

</template>

<script>
import { Fancybox } from "@fancyapps/ui/src/Fancybox/Fancybox.js";
import "@fancyapps/ui/dist/fancybox.css";

export default {
  components: {},
  props: {
    purchase: Object,
  },
};
</script>
