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

	type Props = {
		dotColor?: string;
		class?: string;
		children?: import('svelte').Snippet;
	};

	let {
		dotColor = '#f43f5e',
		class: className = '',
		children
	}: Props = $props();
</script>

<div
	class={cn(
		'inline-flex items-center gap-2 rounded-full bg-background-inset px-3 py-1',
		className
	)}
>
	<span
		class="relative flex size-2"
	>
		<span
			class="absolute inline-flex h-full w-full animate-ping rounded-full opacity-75"
			style:background={dotColor}
		></span>
		<span
			class="relative inline-flex size-2 rounded-full"
			style:background={dotColor}
		></span>
	</span>
	<span class="text-xs font-medium text-foreground">
		{@render children?.()}
	</span>
</div>