<script lang="ts">
	interface Props {
		gravando: boolean;
		iniciadoPor?: string;
	}

	let { gravando, iniciadoPor }: Props = $props();
</script>

{#if gravando}
	<div
		class="bg-error/90 text-error-content flex items-center gap-2 px-4 py-2 text-sm font-semibold"
		role="alert"
		aria-live="polite"
	>
		<div class="animate-pulse">
			<div class="h-3 w-3 rounded-full bg-error-content"></div>
		</div>
		<span>
			{iniciadoPor ? `Gravando iniciada por ${iniciadoPor}` : 'Chamada está sendo gravada'}
		</span>
	</div>
{/if}
