feat: add TrackedMovies component to display upcoming and currently showing films; introduce MovieRow for individual movie representation

src/components/molecules/TrackedMovies/index.tsx

@@ -0,0 +1,84 @@
+"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 { MovieRow } from "@/components/atoms/MovieRow";
+
+export const TrackedMovies: FC = () => {
+  const { movies } = useGlobalStore();
+
+  if (movies.length === 0) {
+    return null;
+  }
+
+  const today = new Date();
+  const upcoming = movies.filter(
+    (movie) => new Date(movie.release_date) > today
+  );
+  const inCinema = movies.filter((movie) => {
+    const daysSinceRelease = Math.floor(
+      (new Date().getTime() - new Date(movie.release_date).getTime()) /
+        (1000 * 60 * 60 * 24)
+    );
+
+    return (
+      new Date(movie.release_date) <= today &&
+      daysSinceRelease <= 30 &&
+      !movie.seen
+    );
+  });
+
+  // Sort by release date.
+  const sortedUpcoming = upcoming.sort(
+    (a, b) =>
+      new Date(a.release_date).getTime() - new Date(b.release_date).getTime()
+  );
+  const sortedInCinema = inCinema.sort(
+    (a, b) =>
+      new Date(b.release_date).getTime() - new Date(a.release_date).getTime()
+  );
+
+  return (
+    <section className="bg-gray-900/50 border-b border-gray-800">
+      <div className="container py-6">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Currently in cinemas. */}
+          {sortedInCinema.length > 0 && (
+            <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})
+              </h3>
+              <div className="space-y-2">
+                {sortedInCinema.map((movie) => (
+                  <MovieRow key={movie.id} movie={movie} isUpcoming={false} />
+                ))}
+              </div>
+            </div>
+          )}
+          {/* Upcoming premieres. */}
+          {sortedUpcoming.length > 0 && (
+            <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})
+              </h3>
+              <div className="space-y-2">
+                {sortedUpcoming.map((movie) => (
+                  <MovieRow key={movie.id} movie={movie} isUpcoming />
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {sortedUpcoming.length === 0 && sortedInCinema.length === 0 && (
+          <p className="text-gray-400 text-sm text-center py-4">
+            Wszystkie śledzone filmy zostały już obejrzane
+          </p>
+        )}
+      </div>
+    </section>
+  );
+};