<script>
	const { scale = 1, scrollDirection = undefined, class: className = undefined, ...props } = $props();

	let height = $state(0)
	let width = $state(0)
</script>

<svg
	xmlns="http://www.w3.org/2000/svg"
	viewBox="0 0 {width/scale} {height/scale}"
	width="100%"
	height="100%"
	class={className}
	bind:clientHeight={height}
	bind:clientWidth={width}
	{...props}
>
	<defs>
		<pattern id="checks" patternUnits="userSpaceOnUse" width="16" height="16" class={scrollDirection ? ['scroll', scrollDirection] : []}>
			<rect width="16" height="16" fill="var(--pattern-light)" />
			<rect width="8" height="8" x="0" y="0" fill="var(--pattern-dark)" />
			<rect width="8" height="8" x="8" y="8" fill="var(--pattern-dark)" />
		</pattern>
	</defs>
	<rect width="100%" height="100%" fill="url(#checks)" />
</svg>

<style>
		.scroll {
				animation: scroll-up-left 2s linear infinite;
		}

		.scroll.up-left {
				animation-name: scroll-up-left;
		}

		@keyframes scroll-up-left {
				0% {
						transform: translate3d(0px, 0px, 0px);
				}
				100% {
						transform: translate3d(-16px, -16px, 0px);
				}
    }
</style>