<template>
  <div class="video-grid">
    <video-card
      v-for="video in videos"
      :key="video.id"
      :video="video"
      @click="$emit('click', video)"
      @favorite="$emit('favorite', video.id)"
    />
  </div>
</template>

<script setup lang="ts">
import VideoCard from './VideoCard.vue'

defineProps<{
  videos: any[]
}>()
</script>

<style scoped>
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
</style>