"use client";

import { useState } from "react";

/** Album art keyed by release-group MBID, served through /api/cover (which caches it on disk +
 *  sends a long Cache-Control, so it isn't re-fetched from the Cover Art Archive on every
 *  Library / Recently-Pressed render). Falls back to a placeholder when there's no MBID or art. */
export function CoverArt({
  rgMbid,
  alt,
  size = 250,
  className,
}: {
  rgMbid: string | null | undefined;
  alt: string;
  size?: 250 | 500;
  className?: string;
}) {
  const [failed, setFailed] = useState(false);
  const cls = `cover ${className ?? ""}`.trim();
  if (!rgMbid || failed) {
    return (
      <div className={`${cls} cover-fallback`} role="img" aria-label={alt}>
        <span>◉</span>
      </div>
    );
  }
  return (
    // eslint-disable-next-line @next/next/no-img-element
    <img
      className={cls}
      src={`/api/cover/${rgMbid}?size=${size}`}
      alt={alt}
      loading="lazy"
      onError={() => setFailed(true)}
    />
  );
}