<script>
  import { onMount } from 'svelte';
  import '../app.css';
  import favicon from '$lib/assets/favicon.svg';
  import ToastContainer from '$lib/components/ToastContainer.svelte';
  import { config } from '$lib/stores/config.js';

  let { children } = $props();
  let configLoading = $state(true);

  onMount(async () => {
    await config.load();
    configLoading = false;
  });
</script>

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

<div class="min-h-screen bg-base-100">
  {#if configLoading}
    <div class="flex min-h-screen items-center justify-center">
      <div class="text-center">
        <span class="loading loading-spinner loading-lg text-primary"></span>
        <p class="mt-4 text-base-content/60">Loading configuration...</p>
      </div>
    </div>
  {:else}
    {@render children()}
  {/if}
  <ToastContainer />
</div>
