From c22f44b48386ef75065cf9f923ad4b159901af48 Mon Sep 17 00:00:00 2001
From: Esa Kataja <ekataja@gmail.com>
Date: Tue, 19 Nov 2024 21:55:30 +0200
Subject: [PATCH] Add read movie details from props in MovieDetails.svelte

---
 src/lib/components/MovieDetails.svelte | 35 +++++++++++++++-----------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/MovieDetails.svelte b/src/lib/components/MovieDetails.svelte
index 630f473..930901d 100644
--- a/src/lib/components/MovieDetails.svelte
+++ b/src/lib/components/MovieDetails.svelte
@@ -1,30 +1,35 @@
+<script>
+	let data = $props();
+	const movie = data.data.movie;
+	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">Maple Valley Christmas</h2>
+	<h2 class="mb-4 text-center text-xl font-semibold">{movie.name}</h2>
 	<div class="mx-auto flex gap-2 px-3">
 		<div class="movie-poster">
-			<img
-				class="rounded-2xl"
-				src="https://m.media-amazon.com/images/M/MV5BZjliMTRlMGItOGQzZC00NTI2LWJkODctZWZmMDIzOGRmYTQ3XkEyXkFqcGc@._V1_.jpg"
-				alt="Poster"
-			/>
+			<img class="rounded-2xl" src={movie.poster_url} alt="Poster" />
 		</div>
-		<div>
-			<div class="grid grid-cols-2">
-				<p class="font-semibold">Vuosi:</p>
-				<p>2022</p>
+		<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>Peyton List, Andrew W. Walker, Frances Flanagan</p>
+				<p>{actors}</p>
 			</div>
-			<div class="mt-2">
+			<div>
 				<p class="font-semibold">Juoni:</p>
 				<div>
 					<p>
-						Erica on karjatilan omistaja, joka on viettänyt koko elämänsä työskennellen perheensä
-						tilalla äitinsä ja siskonsa kanssa. Kun Aaron saapuu ja sotkee hänen suunnitelmansa,
-						Erica alkaa pohtia, mitä hän oikeastaan haluaa elämältään.
+						{movie.plot}
 					</p>
 				</div>
 			</div>
+			<div>
+				<p class="font-semibold">IMDB:</p>
+				<a href={imdb_link}>{imdb_link}</a>
+			</div>
 		</div>
 	</div>
 </div>