<script lang="ts">
	import '../app.css';
	import MdevTriangle from '$lib/components/custom/mdev-triangle.svelte';
	import { ModeWatcher, toggleMode } from 'mode-watcher';
	import SunIcon from '@lucide/svelte/icons/sun';
	import MoonIcon from '@lucide/svelte/icons/moon';
	import { Button, buttonVariants } from '$lib/components/ui/button/index.js';


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

<ModeWatcher />

<div class="flex flex-col min-h-dvh">

	<div class="flex justify-center">

		<header class="flex justify-between items-center max-w-7xl w-screen p-4">
			<a href="/" class="flex items-center gap-2 text-2xl font-bold">
				<MdevTriangle size={48} class="text-primary" />
				<span class="hidden sm:block">MarinoDev Lost & Found</span>
			</a>
			<div class="items-center flex gap-4">
				<div class="inline-block">
					<a href="/account" class={buttonVariants({variant: 'outline'})}>
						Account
					</a>
				</div>
				<div class="inline-block">
					<Button onclick={toggleMode} variant="outline" size="icon">
						<SunIcon
							class="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 !transition-all dark:scale-0 dark:-rotate-90"
						/>
						<MoonIcon
							class="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 !transition-all dark:scale-100 dark:rotate-0"
						/>
						<span class="sr-only">Toggle theme</span>
					</Button>
				</div>
			</div>
		</header>
	</div>
	<div class="flex-1">

		<div class="flex justify-center">
			<main class="w-full">
				{@render children?.()}
			</main>
		</div>
	</div>

	<footer class="gap-2 py-2 text-center text-sm text-muted-foreground">
		<p>
			{new Date().getFullYear()} MarinoDev. <a href="https://git.marinodev.com/drake/fbla26"
																							 class="hover:underline">Git Repository</a>
		</p>
		<!--		<p>-->
		<!--			<a href="/privacy" class="underline hover:text-gray-700">Privacy Policy</a> |-->
		<!--			<a href="/terms" class="underline hover:text-gray-700">Terms of Service</a>-->
		<!--		</p>-->
	</footer>
</div>
