"use client";

import { useState } from "react";

/**
 * Cover image for an article. CMS records carry absolute image URLs pointing
 * at hosts we don't control, and some are dead (e.g. a 404 on the marketing
 * site). A broken <img> still renders its own box, so with a border and
 * margin applied it shows up as a stray hairline above the article body -
 * hide the element outright once the load fails.
 */
export function BlogCoverImage({ src }: { src: string }) {
  const [failed, setFailed] = useState(false);
  if (failed) return null;

  return (
    // CMS image hosts vary per record, so next/image's loader isn't a fit here.
    // eslint-disable-next-line @next/next/no-img-element
    <img src={src} alt="" className="blog-detail-image" onError={() => setFailed(true)} />
  );
}