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

{#if $syncStatus === 'offline'}
	<div
		data-testid="sync-banner-offline"
		class="flex items-center justify-center gap-2 bg-amber-100 px-4 py-2 text-sm text-amber-900
			dark:bg-amber-900/30 dark:text-amber-200"
		role="status"
	>
		<span class="h-2 w-2 rounded-full bg-amber-500"></span>
		<span>{m.sync_offline()}</span>
	</div>
{:else if $syncStatus === 'syncing'}
	<div
		data-testid="sync-banner-syncing"
		class="flex items-center justify-center gap-2 bg-blue-50 px-4 py-2 text-sm text-blue-900
			dark:bg-blue-900/20 dark:text-blue-200"
		role="status"
	>
		<span class="h-2 w-2 rounded-full bg-blue-500 animate-pulse"></span>
		<span>{m.sync_syncing()}</span>
	</div>
{/if}
