<script lang="ts">
import { defineComponent } from 'vue'
import { config } from '@/main'
import { useRouter } from 'vue-router'

export default defineComponent({
	name: 'ExploreVideo',
	props: {
		id: {
			type: Number,
			required: true,
		}
	},
	data() {
		return {
			config,
		}
	},
	setup() {
		const router = useRouter();
		return { router }
	},
})
</script>

<template>
	<div class="explore-video" @click="this.router.push(`/explore/videos?video=${id}`)">
		<img :src="`${config.serverURL}/video/${id}/thumbnail`" class="explore-video-thumbnail" />
	</div>
</template>

<style scoped>
.explore-video {
	border-radius: 15px;
	border: 2px solid var(--accent-color);
	width: 200px;
	height: 300px;
}

.explore-video:hover {
	cursor: pointer;
	animation-name: interaction;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

.explore-video-thumbnail {
	border-radius: 15px;
	width: 100%;
	height: 100%;
}
</style>
