<template>
	<li class="flex flex-row bg-white rounded-lg overflow-hidden shadow-md lg:flex-col transform hover:scale-105 transition-transform cursor-pointer">
		<movie-poster class="w-3/12 lg:w-full flex-shrink-0" :src="movie.posterPath ?? undefined" size="w185"/>
		<div class="relative box-border p-4 flex flex-col justify-center w-full lg:h-full text-md xs:text-lg sm:text-xl md:text-base xl:text-sm" style="box-shadow: 0px -10px 10px rgba(0, 0, 0, 0.10);">
			<div class="flex-grow flex flex-col justify-center lg:justify-start">
				<h3 class="font-medium">{{ movie.title }}</h3>
				<span v-if="movie.releaseDate" class="opacity-50">{{ movie.releaseDate.slice(0, 4) }}</span>
			</div>
			<div v-if="movie.plexLink" title="Added to Plex" class="flex">
				<div class="inline-block bg-ui-plexGray rounded-full w-1/6 lg:w-1/3">
					<img src="../assets/plex_logo.svg" alt="Added to Plex" style="margin: 15% 25%;"/>
				</div>
			</div>
		</div>
	</li>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import MoviePoster from "./MoviePoster.vue";

export default defineComponent({
	components: {
		MoviePoster
	},
	props: ["movie"]
});
</script>
