package main

// diagramCaptionComponent renders the figure with overlay pins and a Fig. heading.
templ diagramCaptionComponent(data DiagramCaptionData) {
	<figure data-block="scifi-clean:diagram_caption" class="my-8 max-w-3xl mx-auto px-4">
		<div class="relative hairline bg-card">
			if data.Image == "" {
				<div class="bg-grid aspect-video flex items-center justify-center">
					<span class="scifi-mono text-sm text-muted-foreground uppercase tracking-widest">
						No diagram yet
					</span>
				</div>
			} else {
				<img
					src={ data.Image }
					alt={ data.Title }
					class="block w-full h-auto"
				/>
				for _, pin := range data.CalloutPins {
					<span
						class="absolute inline-flex items-center scifi-mono text-xs uppercase tracking-wider px-2 py-1 bg-card text-foreground hairline"
						style={ percentStyle(pin.X, pin.Y) }
					>
						{ pin.Label }
					</span>
				}
			}
		</div>
		<figcaption class="mt-3 hairline-t pt-3">
			<h4 class="scifi-h4 scifi-mono text-sm uppercase tracking-widest text-foreground">
				{ "Fig. " }
				if data.FigureNumber != "" {
					{ data.FigureNumber }
				} else {
					{ "00" }
				}
				{ "." }
				if data.Title != "" {
					<span class="text-muted-foreground ml-2">{ data.Title }</span>
				}
			</h4>
			if data.Body != "" {
				<div class="scifi-body prose prose-sm max-w-none text-muted-foreground mt-2">
					@templ.Raw(data.Body)
				</div>
			}
		</figcaption>
	</figure>
}