<script lang="ts">
	import * as m from '$lib/paraglide/messages';

	interface Props {
		size?: 'sm' | 'md' | 'lg';
		class?: string;
	}
	let { size = 'md', class: extra = '' }: Props = $props();

	const px = $derived(size === 'sm' ? 16 : size === 'lg' ? 40 : 24);
</script>

<div role="status" aria-live="polite" class={extra}>
	<svg
		data-testid="spinner"
		width={px}
		height={px}
		viewBox="0 0 24 24"
		fill="none"
		class="animate-spin motion-reduce:animate-none"
	>
		<circle
			cx="12"
			cy="12"
			r="9"
			stroke="currentColor"
			stroke-width="2.5"
			stroke-linecap="round"
			stroke-dasharray="42 14"
			opacity="0.75"
		/>
	</svg>
	<span class="sr-only">{m.loading()}</span>
</div>
