<script lang="ts">
	import Footer from '$lib/components/layouts/Footer.svelte';
	import { Toaster } from '$lib/components/ui/sonner';
	// import { RenderScan } from 'svelte-render-scan';
	// import { dev } from '$app/environment';
	let { children, data } = $props();
	import { page } from '$app/state';
</script>

<!-- {#if dev}
	<RenderScan />
{/if} -->

<div class="mx-auto grid min-h-[100dvh] grid-rows-[auto_1fr_auto]">
	<div class="mx-auto grid w-full grid-cols-12 gap-6 px-12 py-8">
		<div class="col-span-2 flex flex-col gap-3 border-r border-gray-300">
			<div class="flex flex-col gap-2">
				<p class="font-semibold">Manage Account</p>
				<ul class="flex flex-col gap-1 pl-3">
					<li class="flex flex-col gap-1">
						<a
							href="/profile"
							class="text-gray-500 {page.url.pathname === '/profile' ? 'text-primary' : ''}"
							>My Profile</a
						>
						<!-- <a
						href="/me/payment"
						class="text-gray-500 {page.url.pathname === '/me/payment' ? 'text-primary' : ''}"
						>My Payment Options</a
					> -->
					</li>
					{#if data?.locals?.user?.role === 'CELEBRITY'}
						<li class="flex flex-col gap-1">
							<a
								href="/favourite"
								class="text-gray-500 {page.url.pathname === '/favourite' ? 'text-primary' : ''}"
								>My favourite</a
							>
						</li>
					{/if}
				</ul>
			</div>
			<div class="flex flex-col gap-2">
				<p class="font-semibold">Orders</p>
				<ul class="flex flex-col gap-1 pl-3">
					<li>
						<a
							href="/order"
							class="text-gray-500 {page.url.pathname === '/order' ? 'text-primary' : ''}"
							>My Orders</a
						>
					</li>
					<li>
						<a
							href="/order/return"
							class="text-gray-500 {page.url.pathname === '/order/return' ? 'text-primary' : ''}"
							>Returns</a
						>
					</li>
					<li>
						<a
							href="/order/cancellation"
							class="text-gray-500 {page.url.pathname === '/order/cancellation'
								? 'text-primary'
								: ''}">Cancellations</a
						>
					</li>
					<li>
						<a
							href="/order/review"
							class="text-gray-500 {page.url.pathname === '/order/review' ? 'text-primary' : ''}"
							>Reviews</a
						>
					</li>
					<li>
						<a
							href="/order/wishlist"
							class="text-gray-500 {page.url.pathname === '/order/wishlist' ? 'text-primary' : ''}"
							>Wishlists</a
						>
					</li>
				</ul>
			</div>
		</div>
		<div class="col-span-10">
			{@render children()}
		</div>
	</div>
</div>
<Toaster position="top-center" richColors />

<style>
	:global(input) {
		background-color: transparent;
	}
</style>
