<template>
  <div>
    <div
      class="w-full aspect-w-16 aspect-h-9 bg-gray-200 rounded-lg overflow-hidden cursor-pointer"
    >
      <img
        :src="video.snippet.thumbnails.high.url"
        alt=""
        class="w-full h-full object-center object-cover group-hover:opacity-75"
      />
    </div>
    <h3 class="mt-4 text-sm text-gray-700">
      {{ video.snippet.publishedAt }}
    </h3>
    <p class="mt-1 text-lg font-medium text-gray-900">
      {{ video.snippet.title }}
    </p>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'VideoPreview',

  props: {
    video: {
      type: Object,
      default: () => {
        return {}
      },
      required: true,
    },
  },
})
</script>
