<script lang="ts">
	import type { Snippet } from 'svelte';
	import { page } from '$app/stores';
	import { Button } from '$lib/components/ui/button';
	import { Shield, Key, Users, UserCog } from 'lucide-svelte';
	
	let { children }: { children: Snippet } = $props();
	
	const adminRoutes = [
		{ name: 'Roles', path: '/dashboard/admin/roles', icon: Shield }
	];
	
	const currentPath = $derived($page.url.pathname);
</script>

<div class="min-h-screen bg-background">
	<div class="border-b">
		<div class="container mx-auto px-4">
			<div class="flex items-center gap-2 py-4 overflow-x-auto">
				{#each adminRoutes as route}
					{@const Icon = route.icon}
					<Button
						variant={currentPath === route.path ? 'default' : 'ghost'}
						href={route.path}
						class="flex items-center gap-2 whitespace-nowrap"
					>
						<Icon class="h-4 w-4" />
						{route.name}
					</Button>
				{/each}
			</div>
		</div>
	</div>
	
	{@render children()}
</div>
