From 54e2e74e3aa7562ebae9c908e16ef76bd07e8bd3 Mon Sep 17 00:00:00 2001
From: Norbert Maciaszek <norbert@ambiscale.com>
Date: Fri, 15 Aug 2025 17:13:52 +0200
Subject: [PATCH] Enhance MovieCard component: add simpleToggle prop to
 conditionally render favorite button and update vote average display logic
 for improved user experience. Update Hero component styles for better visual
 consistency.

---
 src/components/atoms/MovieCard/index.tsx | 59 +++++++++++++-----------
 src/components/organisms/Hero/index.tsx  |  2 +-
 src/lib/tmdb/server.ts                   | 13 ++++--
 3 files changed, 42 insertions(+), 32 deletions(-)

diff --git a/src/components/atoms/MovieCard/index.tsx b/src/components/atoms/MovieCard/index.tsx
index d275744..90757dd 100644
--- a/src/components/atoms/MovieCard/index.tsx
+++ b/src/components/atoms/MovieCard/index.tsx
@@ -13,6 +13,7 @@ import { RiCalendarCheckLine, RiCalendarScheduleLine } from "react-icons/ri";
 type Props = Movie & {
   layout?: "default" | "zeus";
   showDayCounter?: boolean;
+  simpleToggle?: boolean;
 };
 
 const buttonClass =
@@ -21,6 +22,7 @@ const buttonClass =
 export const MovieCard: FC<Props> = ({
   layout = "default",
   showDayCounter = true,
+  simpleToggle = false,
   ...movie
 }) => {
   const {
@@ -93,7 +95,7 @@ export const MovieCard: FC<Props> = ({
             {alreadyInStore && (
               <div className="flex flex-col">
                 <>
-                  {isReleased && (
+                  {isReleased && !simpleToggle && (
                     <button
                       className={`${buttonClass} text-white`}
                       onClick={handleSeen}
@@ -115,25 +117,27 @@ export const MovieCard: FC<Props> = ({
                     </button>
                   )}
 
-                  <button
-                    className={`${buttonClass} text-amber-400`}
-                    onClick={handleFavorite}
-                  >
-                    <span className="group-hover/toggle:hidden">
-                      {favorite ? (
-                        <MdFavorite size={iconSize} />
-                      ) : (
-                        <MdFavoriteBorder size={iconSize} />
-                      )}
-                    </span>
-                    <span className="hidden group-hover/toggle:block">
-                      {favorite ? (
-                        <MdFavoriteBorder size={iconSize} />
-                      ) : (
-                        <MdFavorite size={iconSize} />
-                      )}
-                    </span>
-                  </button>
+                  {!simpleToggle && (
+                    <button
+                      className={`${buttonClass} text-amber-400`}
+                      onClick={handleFavorite}
+                    >
+                      <span className="group-hover/toggle:hidden">
+                        {favorite ? (
+                          <MdFavorite size={iconSize} />
+                        ) : (
+                          <MdFavoriteBorder size={iconSize} />
+                        )}
+                      </span>
+                      <span className="hidden group-hover/toggle:block">
+                        {favorite ? (
+                          <MdFavoriteBorder size={iconSize} />
+                        ) : (
+                          <MdFavorite size={iconSize} />
+                        )}
+                      </span>
+                    </button>
+                  )}
 
                   <button
                     className={`${buttonClass} text-red-500`}
@@ -153,16 +157,17 @@ export const MovieCard: FC<Props> = ({
           </span>
         </figure>
         <div className="p-4">
+          {!!vote_average && (
+            <p className="flex items-center gap-1 text-sm mb-2">
+              <span className="text-yellow-400">★</span>
+              <span>{vote_average.toFixed(1)}/10</span>
+            </p>
+          )}
+
           <div className="flex justify-between">
             <h2 className="text-xl leading-[1.1] font-bold">{title}</h2>
-
-            {!!vote_average && (
-              <p className="flex items-center gap-1 text-sm">
-                <span className="text-yellow-400">★</span>
-                <span>{vote_average.toFixed(1)}/10</span>
-              </p>
-            )}
           </div>
+
           <p
             className={`text-sm mt-2 flex items-center gap-1 leading-[1.1] ${
               isReleased ? "text-green-700" : "text-yellow-500"
diff --git a/src/components/organisms/Hero/index.tsx b/src/components/organisms/Hero/index.tsx
index daeb9dd..4bc6354 100644
--- a/src/components/organisms/Hero/index.tsx
+++ b/src/components/organisms/Hero/index.tsx
@@ -237,7 +237,7 @@ export const Hero: FC<Props> = ({
               className={`w-3 h-3 rounded-full transition-all duration-300 disabled:cursor-not-allowed cursor-pointer ${
                 index === currentIndex
                   ? "bg-secondary scale-125"
-                  : "bg-secondary/50 hover:bg-secondary/70"
+                  : "bg-white/50 hover:bg-secondary/70"
               }`}
             />
           ))}
diff --git a/src/lib/tmdb/server.ts b/src/lib/tmdb/server.ts
index 553d422..f9c0523 100644
--- a/src/lib/tmdb/server.ts
+++ b/src/lib/tmdb/server.ts
@@ -27,6 +27,7 @@ export async function search(options: SearchOptions): Promise<SearchResult> {
   const params = new URLSearchParams();
 
   options.language = "pl-PL";
+  options.region = "PL";
 
   Object.entries(options).forEach(([key, value]) => {
     if (value) {
@@ -47,10 +48,14 @@ export async function getTrendingMovies(): Promise<SearchResult> {
   return await fetchTmbd("/trending/movie/day?language=pl-PL");
 }
 
-export async function getUpcomingMovies(): Promise<SearchResult> {
-  return await fetchTmbd("/movie/upcoming?language=pl-PL");
+export async function getNowPlayingMovies(
+  page: number = 1
+): Promise<SearchResult> {
+  return await fetchTmbd(
+    `/movie/now_playing?language=pl-PL&region=PL&page=${page}`
+  );
 }
 
-export async function getNowPlayingMovies(): Promise<SearchResult> {
-  return await fetchTmbd("/movie/now_playing?language=pl-PL&region=PL");
+export async function getUpcomingMovies(): Promise<SearchResult> {
+  return await fetchTmbd("/movie/upcoming?language=pl-PL&region=PL");
 }