package main

import "fmt"

// photoEssayComponent renders a numbered photo-essay grid.
templ photoEssayComponent(data PhotoEssayData) {
	<section data-block="magazine-bold:photo_essay" class="w-full py-12">
		<div class="max-w-6xl mx-auto px-6">
			if data.Title != "" {
				<h2 class="font-display text-deck text-foreground mb-8">{ data.Title }</h2>
			}
			if len(data.Frames) == 0 {
				<div class="font-mono mb-caption py-12">No frames yet.</div>
			} else {
				<div class="mb-photo-grid">
					for _, frame := range data.Frames {
						<figure class={ photoFrameSpanClass(frame.Span) }>
							<img src={ frame.Image } alt={ frame.Caption } class="w-full h-auto block" loading="lazy"/>
							<figcaption class="mb-caption font-mono mt-2 flex items-baseline gap-3">
								<span class="mb-image-folio">{ fmt.Sprintf("%02d", frame.Number) }</span>
								if frame.Caption != "" {
									<span>{ frame.Caption }</span>
								}
							</figcaption>
						</figure>
					}
				</div>
			}
		</div>
	</section>
}