Add read movie details from props in MovieDetails.svelte

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
+			<img class="rounded-2xl" src={movie.poster_url} alt="Poster" />
-				class="rounded-2xl"
+		</div>
-				src="https://m.media-amazon.com/images/M/MV5BZjliMTRlMGItOGQzZC00NTI2LWJkODctZWZmMDIzOGRmYTQ3XkEyXkFqcGc@._V1_.jpg"
+		<div class="space-y-8">
-				alt="Poster"
+			<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>
-			<div class="grid grid-cols-2">
-				<p class="font-semibold">Vuosi:</p>
-				<p>2022</p>
-				<p class="font-semibold">Näyttelijät:</p>
-				<p>Peyton List, Andrew W. Walker, Frances Flanagan</p>
-			</div>
-			<div class="mt-2">
 				<p class="font-semibold">Juoni:</p>
 				<div>
 					<p>
-						Erica on karjatilan omistaja, joka on viettänyt koko elämänsä työskennellen perheensä
+						{movie.plot}
-						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.
 					</p>
 				</div>
 			</div>
+			<div>
+				<p class="font-semibold">IMDB:</p>
+				<a href={imdb_link}>{imdb_link}</a>
+			</div>
 		</div>
 	</div>
 </div>