"use client";

import { useState } from "react";

/**
 * Organizer-uploaded thumbnails aren't on the next/image domain allowlist
 * (arbitrary external URLs), so this stays a plain `<img>` — but still needs
 * client state for the fade-in and the "image 404'd" fallback that a plain
 * `<img>` can't get from CSS alone.
 */
export function EventThumbnail({ src, alt }: { src: string; alt: string }) {
  const [errored, setErrored] = useState(false);
  const [loaded, setLoaded] = useState(false);

  if (errored) {
    return <span className="text-sm">Kolaborativ</span>;
  }

  return (
    // eslint-disable-next-line @next/next/no-img-element -- external/organizer-uploaded path, not yet on next/image allowlist
    <img
      src={src}
      alt={alt}
      loading="lazy"
      onError={() => setErrored(true)}
      onLoad={() => setLoaded(true)}
      className={`h-full w-full object-cover transition-opacity duration-300 ${loaded ? "opacity-100" : "opacity-0"}`}
    />
  );
}