<template>
	<router-link
		:to="project.projectUrl || '/'"
		class="project-tile"
		:class="tileClass(project)"
	> 
		<div
			class="project-tile__cover"
			:style="tileStyle(project)"
		/>
		<div class="project-tile__overlay" />
		<div class="project-tile__title">
			{{ project.name }}

			<AuthenticBadge 
				v-show="project.isAuthentic"
				class="project-tile__title__badge"
				:color="project.accentColor"
			/>
		</div>
	</router-link>
</template>

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

export default Vue.extend({
	props: {
		project: {
			type: Object,
			required: true
		}
	},

	methods: {
		tileStyle(project: any): any {
			return project.coverImage ? {
				backgroundImage: `url(${project.coverImage})`
			} : project.accentColor ? {
				backgroundColor: project.accentColor
			} : undefined; 
		},
		tileClass(project: any): any {
			return {
				'project-tile--cover': project.coverImage
			};
		}
	}
});
</script>

<style lang="scss">
.project-tile {
	@include rounded(xl);
	@include padding(4);

	display: block;
	aspect-ratio: 2/1.2;
	background-color: var(--color-shade-2);
	background-size: cover;
	position: relative;
	overflow: hidden;
	color: unset;

	&__title {
		@include font-weight(bold);

		color: var(--color-negative-4);

		&__badge {
			display: inline-block;
			height: 20px;
			width: 20px;
		}
	}

	.project-tile__overlay {
		@include transition(colors);

		background-color: rgba(0, 0, 0, 0);
		position: absolute;
		inset: 0;
	}

	&:hover .project-tile__overlay {
		background-color: rgba(0, 0, 0, 0.1);
	}

	.project-tile__cover {
		@include transition(transform);

		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		min-height: 5px;
		background-position: center;
		background-size: cover;
		
	}

	&--cover {
		.project-tile__cover {
			bottom: 0;
		}

		.project-tile__title {
			position: relative;
			color: white;
			pointer-events: none;
			text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6), 1px 1px 9px rgba(75, 75, 75, 0.5);
		}

		.project-tile__overlay {
			background-color: rgba(0, 0, 0, 0.2);
		}

		&:hover .project-tile__cover {
			transform: scale(1.05);
		}
	}
}
</style>