<script lang="ts">
	import { QrCode } from '@skeletonlabs/skeleton-svelte';
	import { createWeddingInfo } from '$lib/wedding-info.svelte';

	const wedding = createWeddingInfo();
</script>

<section class="flex flex-1 items-center justify-center px-4 py-16">
	<div class="border-surface-300 dark:border-surface-700 flex flex-col items-center gap-4 border px-6 py-10 text-center">
		<p class="text-primary-600-400 text-2xl tracking-[0.25em] uppercase">Scan to visit</p>
		<h1 class="font-malibu text-4xl">Zoé &amp; Shaldon</h1>

		<QrCode value={wedding.siteUrl} class="flex flex-col items-center gap-4">
			<QrCode.Frame class="w-80 bg-white p-4">
				<QrCode.Pattern />
			</QrCode.Frame>

			<p class="text-surface-700 dark:text-surface-300 text-2xl break-all">{wedding.siteUrl}</p>

			<QrCode.DownloadTrigger mimeType="image/png" fileName="zoe-and-shaldon-qr.png">
				Download PNG
			</QrCode.DownloadTrigger>
		</QrCode>
	</div>
</section>
