package main

import "fmt"

// numbersCounterComponent renders circular numeral badges.
templ numbersCounterComponent(data NumbersData) {
	<section class="kg-section" data-block="kindergarten:numbers_counter">
		<div class="kg-container">
			if len(data.Items) == 0 {
				<div class="kg-empty" data-empty="true">No numbers yet — add a few stats to celebrate.</div>
			} else {
				<div class="kg-numbers-grid">
					for _, item := range data.Items {
						<div class="kg-numbers-item">
							<span class="kg-numeral" data-number={ fmt.Sprintf("%d", item.Number) }>{ fmt.Sprintf("%d", item.Number) }</span>
							if item.Label != "" {
								<span class="kg-numbers-label">{ item.Label }</span>
							}
						</div>
					}
				</div>
			}
		</div>
	</section>
}