package main

// statsGridColumns returns the tailwind grid-column class for n stats.
func statsGridColumns(n int) string {
	switch n {
	case 0, 1:
		return "grid-cols-1"
	case 2:
		return "grid-cols-1 sm:grid-cols-2"
	case 3:
		return "grid-cols-1 sm:grid-cols-3"
	default:
		return "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
	}
}

// statsGlowComponent renders the cyberpunk:stats_glow block.
templ statsGlowComponent(items []StatGlowItem) {
	<section
		data-block="cyberpunk:stats_glow"
		class="cyberpunk-stats w-full py-16"
		style="background-color: hsl(var(--background));"
	>
		<div class="max-w-6xl mx-auto px-4">
			if len(items) == 0 {
				<div class="text-center cyberpunk-mono text-xs uppercase tracking-widest" style="color: hsl(var(--muted-foreground));">
					{ "// add items to render stats" }
				</div>
			} else {
				<div class={ "grid gap-8 text-center", statsGridColumns(len(items)) }>
					for _, stat := range items {
						<div class="cyberpunk-stat-cell">
							<div
								class="cyberpunk-mono cyberpunk-stat-number text-5xl md:text-6xl font-bold tracking-tight"
								style="color: hsl(var(--foreground)); font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);"
							>
								<span>{ stat.Value }</span>
								if stat.Suffix != "" {
									<span style="color: hsl(var(--primary));">{ stat.Suffix }</span>
								}
							</div>
							<div class="cyberpunk-stat-underline mx-auto mt-2 mb-3 h-px w-12" style="background-color: hsl(var(--accent));"></div>
							<div class="cyberpunk-mono cyberpunk-stat-label text-xs uppercase tracking-widest" style="color: hsl(var(--muted-foreground));">
								{ stat.Label }
							</div>
						</div>
					}
				</div>
			}
		</div>
	</section>
}