<template>
	<router-link
		:to="homeUrl"
		class="vindigo-logo"
		:style="{ height: height }"
	>
		<img
			:src="logoUrl"
			class="vindigo-logo"
			:class="imgClass"
			@dragstart.prevent
		>
	</router-link>
</template>

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

export default Vue.extend({

	props: {
		imgClass: String,
		height: {
			type: String,
			default: '2.5rem'
		}
	},

	computed: {
		logoUrl(): boolean {
			return this.$store.state.isDark
				? require("~/assets/img/vindigo-white-alpha.svg")
				: require("~/assets/img/vindigo-black-alpha.svg");
		},
		homeUrl(): string {
			return this.$store.state.profile ? '/' : '/explore';
		}
	}
});
</script>

<style lang="scss">
.vindigo-logo {
	user-select: none;

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