---
/**
 * Figure — a picture in a section, alone across the column or as a pair.
 * images: { src, alt, width, height }[]; two images with pair set them side by side.
 * Without images, the default slot is used (for a video).
 */
interface Img { src: string; alt: string; width: number | string; height: number | string }
interface Props { images?: Img[]; pair?: boolean; caption?: string; class?: string }
const { images, pair = false, caption, class: extra } = Astro.props;
---
<figure class:list={[extra, { 'figure-pair': pair }]}>
  {images ? images.map((i) => <img src={i.src} alt={i.alt} loading="lazy" width={i.width} height={i.height}>) : <slot />}
  {caption && <figcaption set:html={caption} />}
</figure>