<script lang="ts">
	import {
		Breadcrumb,
		BreadcrumbItem,
		BreadcrumbList,
		BreadcrumbSeparator
	} from '$lib/components/ui/breadcrumb';
	import type { BreadcrumbItem as BreadcrumbItemType } from '@/types';
	import { cn } from '$lib/utils';
	import { getContext } from 'svelte';
	import Nav from '$lib/components/nav.svelte';
	import type { User } from '$lib/server/db/schema/users';

	let {
		breadcrumbs,
		className,
		children
	}: { breadcrumbs: BreadcrumbItemType[]; className?: string; children: any } = $props();

	const user = getContext<User>('user');
</script>

<div class="mx-auto flex min-h-screen max-w-7xl flex-col px-4 pt-4 pb-8 sm:px-6 lg:px-8">
	<!-- Header -->
	<header class="flex flex-col gap-4 pb-8">
		<div class="flex items-center justify-between">
			<div class="flex-1">
				<a href="/" class="text-primary text-2xl font-bold">FlbxCup</a>
			</div>
			<div class="flex items-center gap-4">
				{#if user}
					<div class="text-muted-foreground text-sm">
						Welcome, {user.username || 'User'}
					</div>
					<a href="/auth/logout" class="text-primary text-sm hover:underline">Logout</a>
				{:else}
					<a href="/auth/login" class="text-primary text-sm hover:underline">Login</a>
				{/if}
			</div>
		</div>
		<div class="border-b pb-2">
			<Nav />
		</div>
	</header>

	<!-- Breadcrumbs -->
	{#if breadcrumbs?.length}
		<Breadcrumb class="mb-6">
			<BreadcrumbList>
				{#each breadcrumbs as crumb, i}
					<BreadcrumbItem>
						<a href={crumb.href} class={cn(i === breadcrumbs.length - 1 ? 'font-medium' : '')}>
							{crumb.title}
						</a>
					</BreadcrumbItem>
					{#if i < breadcrumbs.length - 1}
						<BreadcrumbSeparator />
					{/if}
				{/each}
			</BreadcrumbList>
		</Breadcrumb>
	{/if}

	<!-- Main content -->
	<main class={cn('flex-1', className)}>
		{@render children?.()}
	</main>

	<!-- Footer -->
	<footer class="text-muted-foreground mt-12 border-t pt-6 text-center text-sm">
		<p>© {new Date().getFullYear()} FlbxCup. All rights reserved.</p>
	</footer>
</div>
