'style3

app/components/SessionCoverImage.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+
+interface SessionCoverImageProps {
+  src: string;
+  alt: string;
+  type?: "skill-exchange" | "side-hustle";
+  className?: string;
+  fill?: boolean;
+  sizes?: string;
+}
+
+export default function SessionCoverImage({ src, alt, type, className = "", fill, sizes }: SessionCoverImageProps) {
+  const [error, setError] = useState(false);
+
+  if (error) {
+    return (
+      <div className="absolute inset-0 flex items-center justify-center bg-stone-200 dark:bg-stone-700 text-2xl sm:text-3xl">
+        {type === "skill-exchange" ? "🔄" : "☕"}
+      </div>
+    );
+  }
+
+  return (
+    <Image
+      src={src}
+      alt={alt}
+      fill={fill}
+      sizes={sizes}
+      className={className}
+      unoptimized
+      onError={() => setError(true)}
+    />
+  );
+}