package main

// imagePairComponent renders a 50/50 photograph diptych with a shared caption.
templ imagePairComponent(data ImagePairData) {
	<section data-block="noir:image_pair" class="py-12">
		<div class="max-w-6xl mx-auto px-6">
			<div class="grid grid-cols-1 md:grid-cols-2 gap-4" style="grid-template-columns: 1fr 1fr;">
				if data.Left != "" {
					<figure class="noir-figure">
						<img src={ data.Left } alt={ data.Caption } loading="lazy" class="w-full h-auto block"/>
					</figure>
				} else {
					<div class="hairline aspect-[4/5]" style="background-color: hsl(var(--muted));"></div>
				}
				if data.Right != "" {
					<figure class="noir-figure">
						<img src={ data.Right } alt={ data.Caption } loading="lazy" class="w-full h-auto block"/>
					</figure>
				} else {
					<div class="hairline aspect-[4/5]" style="background-color: hsl(var(--muted));"></div>
				}
			</div>
			if data.Caption != "" {
				<p class="tracked-mono mt-3 text-center" style="color: hsl(var(--mutedForeground));">
					{ data.Caption }
				</p>
			}
		</div>
	</section>
}