<template>
	<router-link :to="toUrl">
		<img :src="imageUrl" :title="author">
	</router-link>
</template>

<script>
export default {
	name: 'TopItem',
	props: {
		author: {
			type: String,
			required: true,
		},
		imageUrl: {
			type: String,
			required: true,
		},
		link: {
			type: String,
			required: true,
		},
		title: {
			type: String,
			required: true,
		},
	},
	computed: {
		toUrl() {
			return `/${btoa(this.link)}`
		},
	},
}
</script>

<style scoped>
	img {
		height: 100%;
		width: 100%;
	}
</style>
