<script lang="ts">
	import type { Snippet } from 'svelte';
	import type { LayoutData } from './$types.js';
	import { page } from '$app/stores';

	let { data, children }: { data: LayoutData; children: Snippet } = $props();

	const navItems = [
		{ href: '/admin/users', label: 'Users' },
		{ href: '/admin/groups', label: 'Groups' },
		{ href: '/admin/settings', label: 'Settings' }
	] as const;

	function isActive(href: string): boolean {
		return $page.url.pathname === href;
	}
</script>

<div class="p-6">
	<div class="mx-auto max-w-6xl">
		<!-- Admin header -->
		<div class="mb-6 flex flex-wrap items-center gap-4 rounded-xl border border-border bg-card p-4 shadow-sm">
			<span class="text-sm font-semibold text-foreground">Admin Panel</span>
			<div class="flex gap-1">
				{#each navItems as item}
					<a
						href={item.href}
						class="rounded-lg px-3 py-1.5 text-sm font-medium transition-colors {isActive(item.href)
							? 'bg-primary text-primary-foreground'
							: 'text-muted-foreground hover:bg-accent hover:text-foreground'}"
					>
						{item.label}
					</a>
				{/each}
			</div>
			<div class="ml-auto text-xs text-muted-foreground">
				{data.user.displayName} (admin)
			</div>
		</div>

		{@render children()}
	</div>
</div>
