<script>
	let data = $props();
	const movie = data;
	let actors = movie.actors.join(', ');
	const imdb_link = `https://www.imdb.com/title/${movie.imdb_id}/`;
</script>

<div>
	<h2 class="mb-4 text-center text-xl font-semibold">{movie.name}</h2>
	<div class="max-w-1/2 mx-auto flex flex-col gap-4 px-3 lg:flex-row">
		<div class="mx-auto">
			<img class="rounded-2xl" src={movie.poster_url} alt="Poster" />
		</div>
		<div class="space-y-8">
			<div class="grid grid-cols-[auto_1fr] gap-4">
				<p class="font-semibold">Julkaistu:</p>
				<p>{movie.release_date}</p>
				<p class="font-semibold">Näyttelijät:</p>
				<p>{actors}</p>
			</div>
			<div>
				<p class="font-semibold">Juoni:</p>
				<div>
					<p>
						{movie.plot}
					</p>
				</div>
			</div>
			<div>
				<p class="font-semibold">IMDB:</p>
				<a href={imdb_link}>{imdb_link}</a>
			</div>
		</div>
	</div>
</div>
