anime info (desktop)

src/components/SeasonCard.js

@@ -0,0 +1,56 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import { useState } from 'react';
+
+export default function SeasonCard({ season }) {
+  const [imageError, setImageError] = useState(false);
+  
+  if (!season) return null;
+  
+  const handleImageError = () => {
+    console.log("Image error for:", season.name);
+    setImageError(true);
+  };
+  
+  // Get image URL with fallback
+  const imageSrc = imageError ? '/images/placeholder.png' : season.poster;
+  
+  // Generate link
+  const infoLink = `/anime/${season.id}`;
+  
+  return (
+    <Link 
+      href={infoLink}
+      className="block w-full rounded-lg overflow-hidden transition-transform duration-300 hover:scale-[1.02] group"
+      prefetch={false}
+    >
+      <div className={`relative aspect-[3/1.5] rounded-lg overflow-hidden bg-gray-900 shadow-lg ${season.isCurrent ? 'border-2 border-white' : ''}`}>
+        {/* Background image with blur */}
+        <div className="absolute inset-0">
+          <div className="absolute inset-0 bg-black opacity-60 z-[2]"></div>
+          <Image
+            src={imageSrc}
+            alt={season.name || 'Season'}
+            fill
+            className="object-cover blur-[2px]"
+            onError={handleImageError}
+            sizes="(max-width: 768px) 100vw, 50vw"
+            unoptimized={true}
+            priority={false}
+          />
+        </div>
+        
+        {/* Content overlay */}
+        <div className="absolute inset-0 flex items-center justify-center z-10 p-3">
+          <div className="text-center">
+            <h3 className="text-white font-bold text-lg line-clamp-1">
+              {season.title || season.name}
+            </h3>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}