<script lang="ts">
	import { goto } from '$app/navigation';
	import { onMount } from 'svelte';
	import { get } from 'svelte/store';
	import { user } from '$lib/user';

	let { children } = $props();

	onMount(() => {
		if (!!get(user)) {
			goto('/');
		}
	});
</script>

<div class="auth-wrap">
	<div class="auth-card">
		<a href="/" class="logo">vereins.haus</a>
		{@render children()}
	</div>
</div>

<style>
	.auth-wrap {
		min-height: 100dvh;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 1.5rem;
		background: #f8fafc;
	}

	.auth-card {
		width: 100%;
		max-width: 400px;
		background: #fff;
		border-radius: 12px;
		padding: 2rem;
		box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
	}

	.logo {
		display: block;
		font-size: 1.4rem;
		font-weight: 700;
		color: #1e40af;
		margin-bottom: 1.5rem;
		letter-spacing: -0.02em;
	}
</style>
