<script lang="ts">
	import { page } from '$app/state';
	let { children } = $props();

	const items = [
		{
			title: 'Account',
			url: '/settings/account'
		},
		{
			title: 'Libraries',
			url: '/settings/libraries'
		},
		{
			title: 'Devices',
			url: '/settings/devices'
		}
	];
</script>

<div class="flex h-[calc(100vh-var(--header-height)-2rem)] flex-col">
	<h1 class="text-xl font-bold">Settings</h1>
	<div class="mt-6 flex flex-1 gap-8 overflow-hidden">
		<nav class="flex w-48 shrink-0 flex-col gap-1">
			{#each items as item}
				<a
					href={item.url}
					class="rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-muted {page.url.pathname.endsWith(item.url)
						? 'bg-muted'
						: 'text-muted-foreground'}"
				>
					{item.title}
				</a>
			{/each}
		</nav>
		<div class="flex-1 overflow-auto">{@render children()}</div>
	</div>
</div>
