Enhance MovieCard component: add showDayCounter prop for displaying days since or until release, update release date formatting to Polish locale, and adjust image aspect ratio for improved layout.

src/components/atoms/MovieCard/index.tsx

@@ -12,12 +12,17 @@ import { RiCalendarCheckLine, RiCalendarScheduleLine } from "react-icons/ri";
 
 type Props = Movie & {
   layout?: "default" | "zeus";
+  showDayCounter?: boolean;
 };
 
 const buttonClass =
   "p-4 text-sm transition-colors cursor-pointer text-center group/toggle";
 
-export const MovieCard: FC<Props> = ({ layout = "default", ...movie }) => {
+export const MovieCard: FC<Props> = ({
+  layout = "default",
+  showDayCounter = true,
+  ...movie
+}) => {
   const {
     movies,
     addMovie: addMovieToStore,
@@ -53,12 +58,22 @@ export const MovieCard: FC<Props> = ({ layout = "default", ...movie }) => {
     updateMovieInStore(id, { favorite: !favorite });
   };
 
+  const releaseDate = new Date(release_date);
+  const daysSinceRelease = Math.abs(
+    Math.floor(
+      (new Date().getTime() - releaseDate.getTime()) / (1000 * 60 * 60 * 24)
+    )
+  );
+
   if (layout === "zeus") {
     return (
       <article className="flex flex-col w-full shadow-lg rounded-t-lg overflow-hidden bg-black/50 shadow-white/5">
         <figure className="relative ">
           <img
-            className="w-full object-cover h-[285px] xl:h-[420px]"
+            style={{
+              aspectRatio: "342/513",
+            }}
+            className="w-full object-cover"
             src={`http://image.tmdb.org/t/p/w342${poster_path}`}
           />
           <span className="absolute inset-0 bg-black/30 backdrop-blur-md opacity-0 hover-any:opacity-100 transition-opacity duration-300 flex items-center justify-center cursor-pointer">
@@ -139,8 +154,21 @@ export const MovieCard: FC<Props> = ({ layout = "default", ...movie }) => {
             }`}
           >
             {isReleased ? <RiCalendarCheckLine /> : <RiCalendarScheduleLine />}
-            {release_date}
+            <span>
+              {releaseDate.toLocaleDateString("pl-PL", {
+                day: "numeric",
+                month: "long",
+                year: "numeric",
+              })}
+            </span>
           </p>
+          {showDayCounter && (
+            <span className="text-xs text-gray-400">
+              {isReleased
+                ? `${daysSinceRelease} dni od premiery`
+                : `${daysSinceRelease} dni do premiery`}
+            </span>
+          )}
           <div className="text-xs text-gray-400 mt-4">
             <ReadMore text={overview} />
           </div>