<script lang="ts">
	import FlowForm from '$lib/components/FlowForm.svelte';
	import type { PageData } from './$types';

	let { data }: { data: PageData } = $props();

	// Derive UI text based on verification flow state
	const flowState = $derived(data.flow.state as string);
	const heading = $derived(
		flowState === 'sent_email' || flowState === 'passed_challenge'
			? 'Enter verification code'
			: 'Verify your email address'
	);
	const description = $derived(
		flowState === 'sent_email'
			? 'Enter the 6-digit verification code sent to your email'
			: flowState === 'passed_challenge'
				? 'Email verified successfully!'
				: 'Enter your email address to receive a verification code'
	);
</script>

<svelte:head>
	<title>Email Verification - Example App</title>
</svelte:head>

<div class="flex min-h-full flex-col justify-center px-4 py-12 sm:px-6 lg:px-8">
	<div class="mx-auto w-full max-w-sm sm:max-w-md">
		<h2 class="text-center text-2xl font-bold leading-9 tracking-tight text-theme sm:text-3xl">
			{heading}
		</h2>
		<p class="mt-2 text-center text-sm text-theme-secondary">
			{description}
		</p>
	</div>

	<div class="mx-auto mt-8 w-full max-w-sm sm:max-w-md">
		<div class="card-padded shadow-theme">
			<FlowForm flow={data.flow} groups={['default', 'code', 'link']} />
		</div>
	</div>
</div>
