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

@@ -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>

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.`;
+  }
 }

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>