From eaab2bef4ec6aa673196673cf6c9df4b39465f27 Mon Sep 17 00:00:00 2001
From: Piet Ostendorp <piet@ostendorp-online.de>
Date: Wed, 29 Oct 2025 10:15:02 +0100
Subject: [PATCH] Make movie duration component dynamic

Updated MovieDurationComponent to accept a 'duration' input and display it dynamically. Adjusted usage in MoviePosterComponent to pass the duration value, improving reusability and flexibility.
---
 src/app/movie-duration/movie-duration.component.html | 2 +-
 src/app/movie-duration/movie-duration.component.ts   | 6 +++++-
 src/app/movie-poster/movie-poster.component.html     | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/app/movie-duration/movie-duration.component.html b/src/app/movie-duration/movie-duration.component.html
index b1b61da..e41a4eb 100644
--- a/src/app/movie-duration/movie-duration.component.html
+++ b/src/app/movie-duration/movie-duration.component.html
@@ -1,4 +1,4 @@
 <span class="flex items-center text-black text-sm rounded-sm px-2 py-1.5">
   <mat-icon class="mr-1" style="font-size: 20px; width: 20px; height: 20px;" fontIcon="schedule"></mat-icon>
-  181 Min.
+  {{ getDurationText() }}
 </span>
diff --git a/src/app/movie-duration/movie-duration.component.ts b/src/app/movie-duration/movie-duration.component.ts
index 9bad0cb..e6a389f 100644
--- a/src/app/movie-duration/movie-duration.component.ts
+++ b/src/app/movie-duration/movie-duration.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-movie-duration',
@@ -7,5 +7,9 @@ import { Component } from '@angular/core';
   styleUrl: './movie-duration.component.css'
 })
 export class MovieDurationComponent {
+  @Input() duration: number = 0;
 
+  getDurationText(): string {
+    return `${this.duration} Min.`;
+  }
 }
diff --git a/src/app/movie-poster/movie-poster.component.html b/src/app/movie-poster/movie-poster.component.html
index 829bb10..8a63ee6 100644
--- a/src/app/movie-poster/movie-poster.component.html
+++ b/src/app/movie-poster/movie-poster.component.html
@@ -3,6 +3,6 @@
 </div>
 <div class="flex gap-1 justify-between">
   <app-movie-rating [rating]="12"></app-movie-rating>
-  <app-movie-duration></app-movie-duration>
+  <app-movie-duration [duration]="181"></app-movie-duration>
   <app-movie-category></app-movie-category>
 </div>