package main

// statsContainerComponent renders the stats grid container with pre-rendered children.
templ statsContainerComponent(childCount int, childrenHTML string) {
	<section class="py-16 gotham-surface flex-1">
		<div class="max-w-6xl mx-auto px-4">
			<div class={ "grid gap-8", gridCols(childCount) }>
				@templ.Raw(childrenHTML)
			</div>
		</div>
	</section>
}

// statsEmptyComponent renders an empty placeholder for stats without items.
templ statsEmptyComponent() {
	<section class="py-16 gotham-surface flex-1">
		<div class="max-w-6xl mx-auto px-4">
			<div class="text-center p-8 border border-dashed border-border rounded-lg">
				<p class="text-muted-foreground">Click + to add stat items</p>
			</div>
		</div>
	</section>
}

// statsComponent renders a Gotham-styled stats counter grid (legacy content-based).
templ statsComponent(items []StatItem) {
	<section class="py-16 gotham-surface flex-1">
		<div class="max-w-6xl mx-auto px-4">
			<div class={ "grid gap-8", gridCols(len(items)) }>
				for _, stat := range items {
					<div class="text-center p-6 rounded-lg gotham-border border">
						if stat.Icon != "" {
							<div class="mb-3 gotham-accent">
								@iconSVG(stat.Icon)
							</div>
						}
						<div class="text-4xl font-bold gotham-accent mb-2">{ stat.Value }</div>
						<div class="text-muted-foreground uppercase text-sm tracking-wider">{ stat.Label }</div>
					</div>
				}
			</div>
		</div>
	</section>
}

// gridCols returns the appropriate grid column class based on item count.
func gridCols(count int) string {
	switch count {
	case 1:
		return "grid-cols-1"
	case 2:
		return "grid-cols-1 md:grid-cols-2"
	case 3:
		return "grid-cols-1 md:grid-cols-3"
	default:
		return "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
	}
}

// iconSVG renders a simple icon based on name.
templ iconSVG(name string) {
	switch name {
		case "chart":
			<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
			</svg>
		case "users":
			<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
			</svg>
		case "clock":
			<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
			</svg>
		case "star":
			<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
			</svg>
		default:
			<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
			</svg>
	}
}
