<script lang="ts">
	import Title from "$lib/components/atoms/title.svelte";
	import { checkoutSessionIdStore } from "$lib/domains/checkout/sid.store";
	import { onMount } from "svelte";
	import { toast } from "svelte-sonner";
	import type { PageData } from "./$types";

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

	onMount(() => {
		toast("Do the check here to then either redirect or show the error");
		if (data.error) {
			return;
		}
		setTimeout(() => {
			if (!data.data) {
				toast.error("An error occurred during checkout", {
					description: "Please try again later or contact support",
				});
				return;
			}
			toast("Please hold...", {
				description: "Preparing checkout session",
			});
			window.location.replace(
				`/checkout/${$checkoutSessionIdStore}/${data.data.id}`,
			);
		}, 3000);
	});
</script>

<div class="flex w-full flex-col items-center justify-center gap-8 p-20">
	{#if data.data}
		<Title size="h3" weight="medium">{data.data.title}</Title>
		<p>{data.data.description}</p>
		<span>
			Either show the user the product as being valid and redirecting them
			to the checkout
		</span>
	{:else}
		<span
			>Show the user an error around "page not found" or "expired link"</span
		>
	{/if}
</div>
