<script lang="ts">
	import Container from "$lib/components/atoms/container.svelte";
	import Title from "$lib/components/atoms/title.svelte";
	import OrdersTableFull from "$lib/domains/order/view/orders-table-full.svelte";
	import { pageTitle } from "$lib/hooks/page-title.svelte";
	import { userInfo } from "$lib/stores/session.info";
	import { onMount } from "svelte";
	import type { PageData } from "./$types";
	import { toast } from "svelte-sonner";

	pageTitle.set("Orders");

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

	userInfo.set(data.user);

	onMount(() => {
		if (data.error) {
			toast.error(data.error.message, {
				description: data.error.userHint,
			});
			return;
		}
	});
</script>

<main class="grid w-full place-items-center pb-12 md:p-8">
	<Container
		containerClass="flex flex-col gap-4 w-full h-full min-h-[44rem] xl:min-h-[80vh] overflow-y-hidden"
		wrapperClass="max-w-[90vw] lg:max-w-7xl"
	>
		<div
			class="flex w-full flex-col items-center justify-between gap-4 md:flex-row"
		>
			<Title size="h3">Orders</Title>
		</div>

		<OrdersTableFull data={data.orders} />
	</Container>
</main>
