refactor: clean Aurora layout

src/components/atoms/MovieCard/layouts/AuroraLayout.tsx

@@ -2,10 +2,10 @@
 import { FC, useState } from "react";
 import { MdFavorite } from "react-icons/md";
 import { RxEyeOpen } from "react-icons/rx";
-import { FaFire, FaTrash, FaInfoCircle } from "react-icons/fa";
+import { FaFire, FaTrash, FaPlusCircle } from "react-icons/fa";
 import { RiCalendarCheckLine, RiCalendarScheduleLine } from "react-icons/ri";
 import { Movie } from "@/types/global";
-import { Button } from "../../Button";
+import Link from "next/link";
 
 interface AuroraLayoutProps extends Movie {
   showDayCounter?: boolean;
@@ -40,8 +40,6 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
   releaseDate,
   simpleToggle,
 }) => {
-  const [isExpanded, setIsExpanded] = useState(false);
-
   const scoreColor =
     vote_average >= 8
       ? "from-emerald-400 to-teal-400"
@@ -50,10 +48,7 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
       : "from-red-400 to-pink-400";
 
   return (
-    <article
+    <article className="group relative w-full overflow-hidden rounded-2xl">
-      className="group relative w-full overflow-hidden rounded-2xl"
-      onMouseLeave={() => setIsExpanded(false)}
-    >
       {/* Aurora background effect */}
       <div className="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-blue-900/20 to-teal-900/20 opacity-60"></div>
       <div className="absolute inset-0 bg-gradient-to-tr from-pink-500/10 via-transparent to-cyan-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-1000"></div>
@@ -68,15 +63,17 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
             aspectRatio: "342/513",
           }}
         >
+          <Link href={`/film/${id}`}>
             <img
               className="w-full h-full object-cover transition-all duration-700 group-hover:scale-110 group-hover:brightness-110"
               src={`http://image.tmdb.org/t/p/w342${poster_path}`}
               alt={title}
             />
+          </Link>
 
           {/* Gradient overlays for depth */}
-          <div className="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/20 to-transparent"></div>
+          <div className="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/20 to-transparent pointer-events-none" />
-          <div className="absolute inset-0 bg-gradient-to-r from-purple-600/20 via-transparent to-cyan-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
+          <div className="absolute inset-0 bg-gradient-to-r from-purple-600/20 via-transparent to-cyan-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
 
           {/* Floating rating badge */}
           {!!vote_average && (
@@ -115,9 +112,8 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
           )}
 
           {/* Status indicators */}
-          {alreadyInStore && (
+          <div className="absolute bottom-4 right-4 flex gap-2">
-            <div className="absolute bottom-4 right-4 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+            {alreadyInStore && !simpleToggle && (
-              {!simpleToggle && (
               <>
                 <div
                   className={`${
@@ -141,27 +137,23 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
                 </div>
               </>
             )}
+            {!alreadyInStore && (
               <div
-                className={`bg-gradient-to-r from-white/25 to-white/15 p-2 rounded-full cursor-pointer hover:bg-red-400 transition-colors border border-white/10 shadow-lg`}
+                className={`bg-gradient-to-r from-emerald-500/50 to-emerald-600/50 p-2 rounded-full cursor-pointer hover:bg-emerald-400 transition-colors border border-white/10 shadow-lg`}
+                onClick={handleAdd}
+              >
+                <FaPlusCircle size={16} className="text-white" />
+              </div>
+            )}
+            {alreadyInStore && (
+              <div
+                className={`bg-gradient-to-r from-red-400/25 to-red-400/15 p-2 rounded-full cursor-pointer hover:bg-red-400 transition-colors border border-white/10 shadow-lg`}
                 onClick={handleRemove}
               >
                 <FaTrash size={16} className="text-white" />
               </div>
-            </div>
             )}
-
-          {/* Magical action overlay */}
-          {!alreadyInStore && (
-            <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-purple-900/40 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-500 flex items-center justify-center">
-              <Button
-                theme="primary"
-                onClick={handleAdd}
-                className="relative overflow-hidden"
-              >
-                <span className="relative z-10">Dodaj do listy</span>
-              </Button>
           </div>
-          )}
         </figure>
 
         {/* Content section with glowing effects */}
@@ -170,15 +162,14 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
           <div className="absolute inset-0 bg-gradient-to-t from-purple-500/5 to-transparent pointer-events-none"></div>
 
           <div className="relative z-10">
-            <h3 className="font-bold text-xl leading-tight mb-3 text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-300 group-hover:from-purple-200 group-hover:to-cyan-200 transition-all duration-500">
+            <Link href={`/film/${id}`}>
+              <h3 className="font-bold text-xl leading-tight mb-3 transition-colors duration-500 hover:text-secondary flex items-center gap-2">
                 {title}
               </h3>
-            <p
+              <p className="text-sm text-gray-400 line-clamp-2 leading-relaxed opacity-80 group-hover:opacity-100 transition-colors duration-300 hover:text-secondary">
-              className="text-sm text-gray-400 line-clamp-2 leading-relaxed opacity-80 group-hover:opacity-100 transition-opacity duration-300 hover:text-secondary cursor-pointer"
-              onClick={() => setIsExpanded(!isExpanded)}
-            >
                 {overview}
               </p>
+            </Link>
           </div>
 
           {/* Bottom section with enhanced styling */}
@@ -223,41 +214,8 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
               )}
             </div>
           </div>
-
-          {/* Zobacz więcej button */}
-          <Button
-            theme="teal"
-            size="small"
-            href={`/film/${id}`}
-            className="transform hover:scale-105 transition-all duration-300 mt-4 flex justify-center items-center gap-2"
-          >
-            <FaInfoCircle size={14} />
-            <span>Zobacz więcej</span>
-          </Button>
         </div>
-
-        {/* Decorative border glow */}
-        <div className="absolute inset-0 rounded-2xl border border-transparent bg-gradient-to-r from-purple-500/20 via-transparent to-cyan-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none"></div>
       </div>
-
-      {isExpanded && (
-        <div
-          className="absolute inset-0 p-4 bg-black bg-gradient-to-t from-purple-500/30 to-secondary/30 cursor-pointer z-10"
-          style={{
-            animation: "fadeIn 0.3s ease-in-out",
-          }}
-          onClick={() => setIsExpanded(false)}
-        >
-          <p>{overview}</p>
-          <style jsx>{`
-            @keyframes fadeIn {
-              from {
-                opacity: 0;
-              }
-            }
-          `}</style>
-        </div>
-      )}
     </article>
   );
 };