package main

// statPairComponent renders the corporate-modernist:stat_pair block.
templ statPairComponent(data StatPairData) {
	<section class="cm-section" data-block="corporate-modernist:stat_pair">
		<div class="cm-content-well">
			if data.Title != "" {
				<h2 class="cm-heading" style="font-size: 1.875rem; margin: 0 0 2rem 0;">
					<span class="cm-heading-h2-accent">{ data.Title }</span>
				</h2>
			}
			if len(data.Stats) > 0 {
				<div class="cm-swiss-12" style="row-gap: 2rem;">
					for _, s := range data.Stats {
						<div style={ statPairColumnSpan(len(data.Stats)) } class="cm-hairline-top" >
							<div class="cm-stat-figure numeric-tabular" data-figure style="padding-top: 1rem;">{ s.Figure }</div>
							if s.Label != "" {
								<div class="cm-stat-label">{ s.Label }</div>
							}
							if s.Source != "" {
								<div class="cm-stat-label" style="margin-top: 0.25rem; text-transform: none; letter-spacing: 0; opacity: 0.8;">{ s.Source }</div>
							}
						</div>
					}
				</div>
			} else {
				<p class="cm-stat-label">No statistics configured.</p>
			}
		</div>
	</section>
}

// statPairColumnSpan picks a column span based on how many stats are configured.
func statPairColumnSpan(count int) string {
	switch {
	case count >= 4:
		return "grid-column: span 3 / span 3;"
	case count == 3:
		return "grid-column: span 4 / span 4;"
	case count == 2:
		return "grid-column: span 6 / span 6;"
	default:
		return "grid-column: span 12 / span 12;"
	}
}