"use client";

import { useState } from "react";
import Image from "next/image";

interface SessionCoverImageProps {
  src: string;
  alt: string;
  type?: "skill-exchange" | "side-hustle" | "loft" | "light-chat";
  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 === "loft" ? "🏠" : type === "skill-exchange" ? "🔄" : "☕"}
      </div>
    );
  }

  return (
    <Image
      src={src}
      alt={alt}
      fill={fill}
      sizes={sizes}
      className={className}
      unoptimized
      onError={() => setError(true)}
    />
  );
}