<script lang="ts">
  import '../app.css'
  import favicon from '$lib/assets/favicon.svg'
  import {
    TolgeeProvider,
    Tolgee,
    DevTools,
    FormatSimple,
    type TolgeeStaticData,
  } from '@tolgee/svelte'
  import { TopBar } from '$lib/components/ui/topBar'
  import {
    PUBLIC_TOLGEE_API_KEY,
    PUBLIC_TOLGEE_API_URL,
  } from '$env/static/public'
  import type { Snippet } from 'svelte'

  let { children, data }: { data: TolgeeStaticData; children: Snippet } =
    $props()

  function getLang(lang: string) {
    return async (): Promise<Record<string, any>> => {
      const res = await fetch(`/lang/${lang}`)
      const translations = await res.json()
      return translations
    }
  }

  const tolgee = Tolgee()
    .use(DevTools())
    .use(FormatSimple())
    .init({
      language: 'de',

      // // for development
      // apiUrl: PUBLIC_TOLGEE_API_URL,
      // apiKey: PUBLIC_TOLGEE_API_KEY,

      // for production
      staticData: {
        de: data['de'] ?? getLang('de'),
      },
    })
</script>

<svelte:head>
  <link rel="icon" href={favicon} />
</svelte:head>

<TolgeeProvider {tolgee}>
  <TopBar />
  <div class="box-content">
    <div
      class="bg-gray-50 dark:bg-gray-950 transition-colors flex justify-center min-h-screen"
    >
      <div class="max-w-full px-4 lg:max-w-6xl box-content">
        {@render children?.()}
      </div>
    </div>
  </div>
</TolgeeProvider>
