From cd6151e0dd65ee3151f6a5953266af6885562e6f Mon Sep 17 00:00:00 2001
From: Piet Ostendorp <piet@ostendorp-online.de>
Date: Wed, 29 Oct 2025 09:23:46 +0100
Subject: [PATCH] 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.
---
 .../movie-poster/movie-poster.component.html  |  2 +-
 .../movie-rating/movie-rating.component.html  |  4 +++-
 .../movie-rating/movie-rating.component.ts    | 20 ++++++++++++++++++-
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/app/movie-poster/movie-poster.component.html b/src/app/movie-poster/movie-poster.component.html
index 0656628..829bb10 100644
--- a/src/app/movie-poster/movie-poster.component.html
+++ b/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>
diff --git a/src/app/movie-rating/movie-rating.component.html b/src/app/movie-rating/movie-rating.component.html
index 1b155aa..fd273c8 100644
--- a/src/app/movie-rating/movie-rating.component.html
+++ b/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>
diff --git a/src/app/movie-rating/movie-rating.component.ts b/src/app/movie-rating/movie-rating.component.ts
index ce30aaa..1e87bc1 100644
--- a/src/app/movie-rating/movie-rating.component.ts
+++ b/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}`;
+  }
 }