MDX/ArticleImage

import type { FunctionComponent } from 'preact';
import { ResponsiveImage } from '@/components/responsive-image';
import { getImageMetadata } from '@/src/lib/metadata-db';
import { captionClass } from '../caption-class';
import { buildEnlargeData, EnlargeButton } from '../image-enlarge-affordance';

export interface ArticleImageProps {
  slug: string;
  caption?: string;
}

const figureClass = 'w-full pt-vgap-sm pb-vgap-lg';

// The image box also serves as the `.zd-enlargeable` element so the
// absolutely-positioned enlarge button anchors to the image (not the
// full-width figure). `.zd-enlargeable` (image-enlarge.css) supplies the
// `position: relative` positioning context (#405).
const imgClass = 'lg:mx-auto lg:max-w-[85%]';

export const ArticleImage: FunctionComponent<ArticleImageProps> = ({ slug, caption }) => {
  const alt = caption ? '' : slug.replace(/-/g, ' ');
  // Enlarge affordance (#405) — present only when the image has pipeline
  // variants. Missing-metadata / variantless images render without it.
  const enlargeData = buildEnlargeData(slug, getImageMetadata(slug));
  return (
    <figure className={figureClass} aria-label={alt || undefined}>
      {enlargeData ? (
        <div className={`zd-enlargeable ${imgClass}`} {...enlargeData}>
          <ResponsiveImage slug={slug} alt={alt} />
          <EnlargeButton />
        </div>
      ) : (
        <div className={imgClass}>
          <ResponsiveImage slug={slug} alt={alt} />
        </div>
      )}
      {caption && <figcaption className={captionClass}>{caption}</figcaption>}
    </figure>
  );
};