<script lang="ts">
	import { page } from '$app/state';
	import AuthModal from '$lib/components/AuthModal.svelte';

	let isOpen = $state(true);
	const user = $derived(page.data.user);
	const anonymousId = crypto.randomUUID();
</script>

<div class="min-h-screen bg-gray-900 flex items-center justify-center p-4">
	{#if user}
		<div class="text-white text-center space-y-4">
			<p class="text-lg">Signed in as <strong>{user.email ?? 'no email'}</strong></p>
			<form method="POST" action="/auth/logout">
				<button class="px-4 py-2 bg-red-600 rounded-md hover:bg-red-700 transition-colors">
					Sign Out
				</button>
			</form>
		</div>
	{:else}
		<button
			onclick={() => isOpen = true}
			class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
		>
			Open Auth Modal
		</button>
		<AuthModal bind:isOpen {anonymousId} />
	{/if}
</div>
