Make movie rating dynamic

The movie rating component now accepts a 'rating' input and displays the rating value dynamically. The background color changes based on the rating, improving visual feedback for different age ratings.

src/app/movie-poster/movie-poster.component.html

@@ -2,7 +2,7 @@
   <img src="assets/test-movie-poster.jpg" alt="Movie Poster" class="w-full h-auto shadow-md">
 </div>
 <div class="flex gap-1 justify-between">
-  <app-movie-rating></app-movie-rating>
+  <app-movie-rating [rating]="12"></app-movie-rating>
   <app-movie-duration></app-movie-duration>
   <app-movie-category></app-movie-category>
 </div>

src/app/movie-rating/movie-rating.component.html

@@ -1 +1,3 @@
-<span class="flex bg-blue-800 rounded-sm shadow-md text-white text-sm px-2 py-1.5">FSK 12</span>
+<span [class]="getRatingColor()" class="text-black flex rounded-sm shadow-md text-sm px-2 py-1.5">
+  {{ getRatingText() }}
+</span>

src/app/movie-rating/movie-rating.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-movie-rating',
@@ -7,5 +7,23 @@ import { Component } from '@angular/core';
   styleUrl: './movie-rating.component.css'
 })
 export class MovieRatingComponent {
+  @Input() rating: number = 0;
 
+  getRatingColor(): string {
+    if (this.rating >= 18) {
+      return 'bg-red-500';
+    } else if (this.rating >= 16) {
+      return 'bg-blue-500';
+    } else if (this.rating >= 12) {
+      return 'bg-green-500';
+    } else if (this.rating >= 6) {
+      return 'bg-yellow-300';
+    } else {
+      return 'bg-white';
+    }
+  }
+
+  getRatingText(): string {
+    return `FSK ${this.rating}`;
+  }
 }