---
import FramedImage from '@components/ui/FramedImage.astro';

interface Media {
  src: string;
  width: number;
  height: number;
  alt: string;
  caption: string;
}
interface Props {
  media: Media[];
  /** Index offset so lightbox indices stay unique across the page. */
  startIndex?: number;
}
const { media, startIndex = 0 } = Astro.props;
---

<div class="grid gap-6 sm:grid-cols-2">
  {
    media.map((m, i) => (
      <figure>
        <FramedImage media={m} index={startIndex + i} />
        <figcaption class="mt-2 font-mono text-mono-meta text-ink-faint">{m.caption}</figcaption>
      </figure>
    ))
  }
</div>
