feat: enhance Carousel component with heading, icon, and color options; update movie sections in Odkrywaj page for improved UI consistency

src/components/molecules/RecommendedMovies/index.tsx

@@ -1,68 +1,27 @@
 "use client";
-
 import { SearchResult } from "@/lib/tmdb/types";
 import { MovieCard } from "@/components/atoms/MovieCard";
-import { FC, useState } from "react";
-import { FaChevronLeft, FaChevronRight, FaStar } from "react-icons/fa";
+import { FC } from "react";
+import { FaStar } from "react-icons/fa";
+import { Carousel } from "../Carousel";
 
 type Props = {
   movies: SearchResult;
 };
 
 export const RecommendedMovies: FC<Props> = ({ movies }) => {
-  const [currentPage, setCurrentPage] = useState(0);
-  const moviesPerPage = 4;
-  const totalPages = Math.ceil(movies.results.length / moviesPerPage);
-
   if (!movies.results.length) return null;
 
-  const currentMovies = movies.results.slice(
-    currentPage * moviesPerPage,
-    (currentPage + 1) * moviesPerPage
-  );
-
-  const nextPage = () => {
-    setCurrentPage((prev) => (prev + 1) % totalPages);
-  };
-
-  const prevPage = () => {
-    setCurrentPage((prev) => (prev - 1 + totalPages) % totalPages);
-  };
-
   return (
     <section className="py-16 bg-gradient-to-br from-slate-900/50 to-slate-800/50">
       <div className="px-6 lg:px-8">
         <div className="max-w-7xl mx-auto">
-          <div className="flex items-center justify-between mb-8">
-            <div className="flex items-center gap-3">
-              <div className="p-2 rounded-lg bg-gradient-to-r from-yellow-500 to-orange-500">
-                <FaStar className="text-white" size={20} />
-              </div>
-              <h2 className="text-3xl font-bold bg-gradient-to-r from-yellow-400 to-orange-400 bg-clip-text text-transparent">
-                Rekomendowane filmy
-              </h2>
-            </div>
-
-            {totalPages > 1 && (
-              <div className="flex gap-2">
-                <button
-                  onClick={prevPage}
-                  className="p-3 rounded-full bg-gradient-to-r from-yellow-500/20 to-orange-500/20 hover:from-yellow-500/30 hover:to-orange-500/30 text-white transition-all duration-300 border border-yellow-400/30"
-                >
-                  <FaChevronLeft size={16} />
-                </button>
-                <button
-                  onClick={nextPage}
-                  className="p-3 rounded-full bg-gradient-to-r from-yellow-500/20 to-orange-500/20 hover:from-yellow-500/30 hover:to-orange-500/30 text-white transition-all duration-300 border border-yellow-400/30"
-                >
-                  <FaChevronRight size={16} />
-                </button>
-              </div>
-            )}
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-            {currentMovies.map((movie) => (
+          <Carousel
+            heading="Rekomendowane filmy"
+            icon={<FaStar />}
+            iconColor="bg-gradient-to-r from-yellow-500 to-orange-500"
+          >
+            {movies.results.map((movie) => (
               <MovieCard
                 key={movie.id}
                 layout="aurora"
@@ -84,25 +43,7 @@ export const RecommendedMovies: FC<Props> = ({ movies }) => {
                 favorite={false}
               />
             ))}
-          </div>
-
-          {totalPages > 1 && (
-            <div className="flex justify-center mt-8">
-              <div className="flex gap-2">
-                {Array.from({ length: totalPages }, (_, i) => (
-                  <button
-                    key={i}
-                    onClick={() => setCurrentPage(i)}
-                    className={`w-3 h-3 rounded-full transition-all duration-300 ${
-                      currentPage === i
-                        ? "bg-gradient-to-r from-yellow-500 to-orange-500 scale-110"
-                        : "bg-white/30 hover:bg-white/50"
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
-          )}
+          </Carousel>
         </div>
       </div>
     </section>