package main

// marqueeComponent renders a horizontally scrolling marquee. The track is
// duplicated so the CSS keyframes can loop seamlessly. Speed is keyed off the
// data-speed attribute which the y2k stylesheet maps to a duration.
templ marqueeComponent(data MarqueeData) {
	<div
		class="y2k-marquee y2k-chrome-bg"
		data-block-key="y2k:marquee"
		data-direction={ data.Direction }
		tabindex="0"
		aria-label="ticker"
	>
		<div class="y2k-marquee-track py-2 px-4 text-sm uppercase tracking-wider text-foreground" data-speed={ data.Speed }>
			for _, item := range data.Items {
				<span class="inline-flex items-center gap-2">
					<span class="text-accent">*</span>
					{ item }
				</span>
			}
			for _, item := range data.Items {
				<span class="inline-flex items-center gap-2" aria-hidden="true">
					<span class="text-accent">*</span>
					{ item }
				</span>
			}
		</div>
	</div>
}