feat: implement GenrePage component to display movies by genre, including recent, upcoming, and top-rated films; enhance metadata generation for SEO

src/components/molecules/TrackedMovies/index.tsx

@@ -1,12 +1,26 @@
 "use client";
 import { FC } from "react";
 import { useGlobalStore } from "@/app/store/globalStore";
-import Link from "next/link";
-import { FaCalendar, FaClock, FaStar } from "react-icons/fa";
+import { FaCalendar, FaClock } from "react-icons/fa";
 import { MovieRow } from "@/components/atoms/MovieRow";
+import { Movie } from "@/types/global";
 
-export const TrackedMovies: FC = () => {
-  const { movies } = useGlobalStore();
+type Props = {
+  overrideMovies?: Movie[];
+  daysLimit?: number;
+  labelCurrent?: string;
+  labelUpcoming?: string;
+};
+
+export const TrackedMovies: FC<Props> = ({
+  overrideMovies,
+  daysLimit = 30,
+  labelCurrent = "Aktualnie w kinach",
+  labelUpcoming = "Nadchodzące premiery",
+}) => {
+  const { movies: storeMovies } = useGlobalStore();
+
+  const movies = overrideMovies || storeMovies;
 
   if (movies.length === 0) {
     return null;
@@ -24,7 +38,7 @@ export const TrackedMovies: FC = () => {
 
     return (
       new Date(movie.release_date) <= today &&
-      daysSinceRelease <= 30 &&
+      daysSinceRelease <= daysLimit &&
       !movie.seen
     );
   });
@@ -48,7 +62,7 @@ export const TrackedMovies: FC = () => {
             <div>
               <h3 className="text-green-400 font-medium text-sm mb-3 flex items-center gap-2">
                 <FaClock className="w-4 h-4" />
-                Aktualnie w kinach ({sortedInCinema.length})
+                {labelCurrent} ({sortedInCinema.length})
               </h3>
               <div className="space-y-2">
                 {sortedInCinema.map((movie) => (
@@ -62,7 +76,7 @@ export const TrackedMovies: FC = () => {
             <div>
               <h3 className="text-blue-400 font-medium text-sm mb-3 flex items-center gap-2">
                 <FaCalendar className="w-4 h-4" />
-                Nadchodzące premiery ({sortedUpcoming.length})
+                {labelUpcoming} ({sortedUpcoming.length})
               </h3>
               <div className="space-y-2">
                 {sortedUpcoming.map((movie) => (