---
/**
 * A set of photographs laid out together.
 *
 *   <PhotoGrid photos={frontmatter.photos} columns={2} exif />
 *
 * `photos` is the array from a photo-set's frontmatter: { src, alt, caption }.
 * The grid is intrinsically sized — tall and wide frames keep their own
 * proportions instead of being cropped to a common ratio, which is usually
 * what you want for a set shot on one walk.
 */
import Figure from './Figure.astro';
import type { ImageMetadata } from 'astro';

interface Photo {
	src: ImageMetadata;
	alt: string;
	caption?: string;
}

interface Props {
	photos: Photo[];
	/** Target column count on a wide screen. Collapses to 1 on a phone. */
	columns?: 1 | 2 | 3;
	width?: 'content' | 'wide' | 'full';
	exif?: boolean;
}

const { photos, columns = 2, width = 'wide', exif = false } = Astro.props;
---

<div
	class:list={['photo-grid', width === 'wide' && 'u-wide', width === 'full' && 'u-full']}
	style={`--columns: ${columns}`}
>
	{
		photos.map((photo, index) => (
			<Figure
				src={photo.src}
				alt={photo.alt}
				caption={photo.caption}
				exif={exif}
				priority={index === 0}
			/>
		))
	}
</div>

<style>
	.photo-grid {
		display: grid;
		grid-template-columns: repeat(var(--columns, 2), 1fr);
		gap: var(--space-m);
		margin-block: var(--space-l);
	}

	/* One column below the reading measure — two side-by-side photos on a
	   phone are two photos nobody can see. */
	@media (width < 40rem) {
		.photo-grid {
			grid-template-columns: 1fr;
		}
	}

	.photo-grid :global(figure) {
		margin-block: 0;
	}

	.photo-grid :global(figcaption) {
		max-inline-size: none;
	}
</style>