<script lang="ts">
  import { setContext } from "svelte";
  import type { Snippet } from "svelte";
  import type { Translations, TranslationReplacements } from "../lib/translations";
  import { T_CONTEXT_KEY, replacePlaceholders } from "../lib/translations";

  let {
    translations = {},
    children,
  }: {
    translations?: Translations;
    children?: Snippet;
  } = $props();

  const t = (key: string, replacements?: TranslationReplacements): string => {
    const raw = translations?.[key] ?? key;
    return replacePlaceholders(raw, replacements);
  };

  setContext(T_CONTEXT_KEY, t);
</script>

{#if children}
  {@render children()}
{/if}
