<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>
                <video :src="common_media.url" controls></video>
            </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>
                <video :src="paid_media.url" controls></video>
            </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>
export default {
  components: {},
  props: {
    purchase: Object,
  },
};
</script>
