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

	import '../app.css';
	import '/src/css/ltr.css';
	import '/src/css/rtl.css';

	import LiveScore from '$lib/components/shared/LiveScore.svelte';
	import TopNav from '$lib/components/shared/TopNav.svelte';
	import Nav from '$lib/components/shared/Nav.svelte';
	import Footer from '$lib/components/shared/Footer.svelte';
	import Sponsors from '$lib/components/home/Sponsors.svelte';
	import { locale } from '$lib/translations';
	// import {page} from "$app/stores";
	//
	//
	// console.log($page.url);

	let l = 'en-us';
</script>

<!--<svelte:head>-->

<!--    {#if $locale !== "en-US"}-->
<!--        <link href="{$page.url.origin}/src/css/rtl.css" rel="stylesheet" type="text/css"/>-->
<!--    {:else}-->
<!--        <link href="{$page.url.origin}/src/css/ltr.css" rel="stylesheet" type="text/css"/>-->
<!--    {/if}-->

<!--</svelte:head>-->

<div
	dir={$locale === 'en-US' ? 'ltr' : 'rtl'}
	class={$locale === 'en-US' ? 'league-spartan-font' : 'rtl'}
>
	<div class="relative flex min-h-screen flex-col">
		<div class="z-30">
			<TopNav />
			<Nav />
			<LiveScore />
		</div>

		<main class="relative z-10 flex-grow">
			{@render children()}
		</main>

		<div class=" z-20 mt-auto">
			<Sponsors />
			<Footer />
		</div>
	</div>
</div>

<style>
	:global(body) {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	:global(main) {
		position: relative;
		min-height: 0;
	}
</style>
