<script lang="ts">
	import Container from "$lib/components/atoms/container.svelte";
	import Title from "$lib/components/atoms/title.svelte";
	import CustomerinfoTable from "$lib/domains/customerinfo/view/customerinfo-table.svelte";
	import { pageTitle } from "$lib/hooks/page-title.svelte";
	import { onMount } from "svelte";
	import { toast } from "svelte-sonner";
	import type { PageData } from "./$types";

	pageTitle.set("Customer Info");

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

	onMount(() => {
		if (data.error) {
			toast.error(data.error.message, {
				description: data.error.userHint,
			});
		}
	});
</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">User Data</Title>
		</div>

		<CustomerinfoTable data={data.data} />
	</Container>
</main>
