package main

// galleryFanGridCols maps the column count to a tailwind grid class with single-column collapse below 640px.
func galleryFanGridCols(cols int) string {
	switch cols {
	case 2:
		return "grid-cols-1 sm:grid-cols-2"
	case 4:
		return "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
	default:
		return "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
	}
}

// fallbackImage returns a tiny transparent svg data URI used when no image src is supplied.
func fallbackImage() string {
	return "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Crect%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22%23222%22%2F%3E%3C%2Fsvg%3E"
}

// galleryFanComponent renders the mirrored gallery framed by sunburst rays.
templ galleryFanComponent(data GalleryFanData) {
	<section data-block="art-deco:gallery_fan" class="py-16">
		<div class="max-w-6xl mx-auto px-4">
			<div class="relative deco-grain">
				<div class="absolute inset-x-0 -top-2 h-12 pointer-events-none deco-sunburst" aria-hidden="true"></div>
				<div class={ "grid gap-4 pt-12", galleryFanGridCols(data.Columns) }>
					if len(data.Images) == 0 {
						<div class="col-span-full text-center text-sm py-12" style="color: hsl(var(--muted-foreground));">
							Add images to populate the fan gallery.
						</div>
					}
					for _, img := range data.Images {
						<figure class="deco-step">
							if img.Src != "" {
								<img src={ img.Src } alt={ img.Caption } class="block w-full h-auto object-cover" style="background-color: hsl(var(--muted));"/>
							} else {
								<img src={ fallbackImage() } alt="" class="block w-full h-auto" style="background-color: hsl(var(--muted));"/>
							}
							if img.Caption != "" {
								<figcaption
									class="mt-2 text-center italic text-sm"
									style="color: hsl(var(--muted-foreground));"
								>
									{ img.Caption }
								</figcaption>
							}
						</figure>
					}
				</div>
				<div class="absolute inset-x-0 -bottom-2 h-12 pointer-events-none deco-sunburst rotate-180" aria-hidden="true"></div>
			</div>
		</div>
	</section>
}