feat: integrate database operations for movie management in global store and UI components; enhance MovieCast with dynamic cast display and button for full cast visibility

src/components/molecules/MovieCast/index.tsx

@@ -1,5 +1,7 @@
+"use client";
+import { Button } from "@/components/atoms/Button";
 import { MovieDetailsRich } from "@/lib/tmdb/types";
-import { FC } from "react";
+import { FC, useState } from "react";
 import { FaDollarSign } from "react-icons/fa";
 
 type Props = {
@@ -7,10 +9,11 @@ type Props = {
 };
 
 export const MovieCast: FC<Props> = ({ movieDetails }) => {
+  const [limitCast, setLimitCast] = useState(8);
   const director = movieDetails?.credits.crew.find(
     (member) => member.job === "Director"
   );
-  const mainCast = movieDetails?.credits.cast.slice(0, 6) || [];
+  const mainCast = movieDetails?.credits.cast.slice(0, limitCast) || [];
 
   const formatCurrency = (amount: number) =>
     new Intl.NumberFormat("pl-PL", {
@@ -26,18 +29,21 @@ export const MovieCast: FC<Props> = ({ movieDetails }) => {
           {mainCast.length > 0 && (
             <div className="lg:col-span-2">
               <h2 className="text-2xl font-bold text-white mb-6">Obsada</h2>
-              <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
                 {mainCast.map((actor) => (
                   <div key={actor.id} className="text-center group">
                     <div className="relative overflow-hidden rounded-xl mb-3">
                       <img
+                        style={{
+                          aspectRatio: "185/278",
+                        }}
                         src={
                           actor.profile_path
                             ? `https://image.tmdb.org/t/p/w185${actor.profile_path}`
                             : "/api/placeholder/185/278"
                         }
                         alt={actor.name}
-                        className="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-500"
+                        className="w-full object-cover group-hover:scale-110 transition-transform duration-500 bg-gradient-to-br from-purple-500/20 to-cyan-500/20"
                       />
                       <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                     </div>
@@ -46,6 +52,22 @@ export const MovieCast: FC<Props> = ({ movieDetails }) => {
                   </div>
                 ))}
               </div>
+
+              {limitCast < movieDetails.credits.cast.length && (
+                <div className="flex justify-center">
+                  <Button
+                    theme="teal"
+                    size="small"
+                    className="mt-6"
+                    onClick={() => {
+                      setLimitCast(movieDetails.credits.cast.length);
+                    }}
+                  >
+                    Pokaż wszystkich (
+                    {movieDetails.credits.cast.length - limitCast})
+                  </Button>
+                </div>
+              )}
             </div>
           )}