<script lang="ts">
	import { cn } from '$lib/utils';

	interface Props {
		size?: number;
		color?: string;
		class?: string;
	}

	let { size = 20, color = 'currentColor', class: className }: Props = $props();

	const bars = Array(12).fill(0);
</script>

<div
	class={cn('wrapper', className)}
	style="--spinner-size: {size}px; --spinner-color: {color};"
>
	<div class="spinner">
		{#each bars as _, i}
			<div class="bar" style="--i: {i}"></div>
		{/each}
	</div>
</div>

<style>
	.wrapper {
		height: var(--spinner-size, 20px);
		width: var(--spinner-size, 20px);
	}

	.spinner {
		position: relative;
		top: 50%;
		left: 50%;
		height: var(--spinner-size, 20px);
		width: var(--spinner-size, 20px);
	}

	.bar {
		animation: bars-spin 1.2s linear infinite;
		background: var(--spinner-color);
		border-radius: 6px;
		height: 8%;
		left: -10%;
		position: absolute;
		top: -3.9%;
		width: 24%;
	}

	.bar:nth-child(1) { animation-delay: -1.2s; transform: rotate(0.0001deg) translate(146%); }
	.bar:nth-child(2) { animation-delay: -1.1s; transform: rotate(30deg) translate(146%); }
	.bar:nth-child(3) { animation-delay: -1s; transform: rotate(60deg) translate(146%); }
	.bar:nth-child(4) { animation-delay: -0.9s; transform: rotate(90deg) translate(146%); }
	.bar:nth-child(5) { animation-delay: -0.8s; transform: rotate(120deg) translate(146%); }
	.bar:nth-child(6) { animation-delay: -0.7s; transform: rotate(150deg) translate(146%); }
	.bar:nth-child(7) { animation-delay: -0.6s; transform: rotate(180deg) translate(146%); }
	.bar:nth-child(8) { animation-delay: -0.5s; transform: rotate(210deg) translate(146%); }
	.bar:nth-child(9) { animation-delay: -0.4s; transform: rotate(240deg) translate(146%); }
	.bar:nth-child(10) { animation-delay: -0.3s; transform: rotate(270deg) translate(146%); }
	.bar:nth-child(11) { animation-delay: -0.2s; transform: rotate(300deg) translate(146%); }
	.bar:nth-child(12) { animation-delay: -0.1s; transform: rotate(330deg) translate(146%); }

</style>