<script lang="ts">
  import { cn } from "$lib/utils.js";
  import type { HTMLSpanAttributes } from "svelte/elements";
  import { onMount } from "svelte";

  let { class: className = "", delayMs = 0, children, ...rest }: HTMLSpanAttributes & { delayMs?: number } = $props();
  let visible = $state(false);

  onMount(() => {
    const timer = setTimeout(() => { visible = true; }, delayMs);
    return () => clearTimeout(timer);
  });
</script>
{#if visible}
  <span class={cn("flex h-full w-full items-center justify-center rounded-full bg-muted text-xs font-medium", className)} {...rest}>
    {@render children?.()}
  </span>
{/if}
