---
import type { StatItem } from "../../data/royalPop";
import styles from "./StatsBand.module.scss";

interface Props {
	items: StatItem[];
}

const { items } = Astro.props;
---

<section class={styles.wrapper} aria-label="Key product stats">
	<div class={styles.inner}>
		<ul class={styles.grid}>
		{
			items.map((item) => (
				<li class={styles.item}>
					<strong data-stat-id={item.id ? `${item.id}-value` : undefined}>{item.value}</strong>
					<span data-stat-id={item.id ? `${item.id}-label` : undefined}>{item.label}</span>
				</li>
			))
		}
		</ul>
	</div>
</section>
