<script lang="ts">
	import { onMount } from "svelte";
	import { browser } from "$app/environment";

	import "./layout.css";
	import favicon from "$lib/assets/favicon.ico";
	import TitleAnimation from "$lib/components/TitleAnimation.svelte";
	import ThemeToggle from "$lib/components/ThemeToggle.svelte";

	let isDev = $state(false);

	onMount(() => {
		isDev =
			window.location.host === "localhost:5173" ||
			window.location.host === "test.bibdle.com";

		// Inject analytics script
		const script = document.createElement("script");
		script.defer = true;
		script.src = "https://umami.snail.city/script.js";
		script.setAttribute(
			"data-website-id",
			"5b8c31ad-71cd-4317-940b-6bccea732acc",
		);
		script.setAttribute("data-domains", "bibdle.com,www.bibdle.com");
		document.body.appendChild(script);
	});

	let { children } = $props();
</script>

<svelte:head>
	<link rel="icon" href={favicon} />
	<link
		rel="alternate"
		type="application/rss+xml"
		title="Bibdle RSS Feed"
		href="/feed.xml"
	/>
	<meta name="description" content="A Wordle-inspired daily Bible game" />
</svelte:head>

<div
	class="min-h-dvh md:bg-linear-to-br md:from-blue-50 md:to-indigo-200 dark:md:from-gray-900 dark:md:to-slate-950"
>
	<h1
		class="text-3xl md:text-4xl font-bold text-center uppercase text-gray-600 dark:text-gray-300 drop-shadow-2xl tracking-widest p-4 pt-12 animate-fade-in-up"
	>
		<TitleAnimation />
		<div class="font-normal"></div>
	</h1>
	{#if isDev}
		<div class="flex justify-center pb-2"><ThemeToggle /></div>
	{:else}
		<div class="justify-center hidden pb-2"><ThemeToggle /></div>
	{/if}
	{@render children()}
</div>
