<template>
	<div class="tile">
		<div class="details">{{ movie.entity.name }}</div>
		<h3 class="title">{{ movie.title }}</h3>
	</div>
</template>

<script>
export default {
	props: {
		movie: {
			type: Object,
			default: null,
		},
	},
};
</script>

<style lang="scss" scoped>
.tile {
	background: var(--background);
	box-shadow: 0 0 3px var(--darken);
}

.details {
	color: var(--text-light);
	background: var(--profile);
	padding: .5rem 1rem;
    font-size: .8rem;
	font-weight: bold;
}

.title {
	padding: 1rem;
	margin: 0;
	font-size: 1rem;
}
</style>
