<template>
	<div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex">
		<!-- 左侧边栏 -->
		<aside
			class="w-40 bg-white dark:bg-gray-800 shadow-sm border-r border-gray-200 dark:border-gray-700 flex flex-col h-screen fixed top-0 left-0 z-30"
		>
			<div class="flex items-center justify-between p-3 border-b border-gray-200 dark:border-gray-700">
				<h1 class="text-xl font-semibold text-gray-900 dark:text-white">
					视频控制器
				</h1>
				<div class="mx-auto mt-1">
					<UColorModeButton size="xs">
						<template #fallback>
							<UButton loading variant="ghost" color="neutral" />
						</template>
					</UColorModeButton>
				</div>
			</div>

			<nav class="flex-1 p-4">
				<ul class="space-y-2">
					<li>
						<NuxtLink
							to="/"
							class="flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors" :class="$route.path === '/'
								? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200'
								: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'"
						>
							<UIcon name="i-heroicons-home" class="mr-3 h-5 w-5" />
							首页
						</NuxtLink>
					</li>
					<li>
						<NuxtLink
							to="/settings"
							class="flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors" :class="$route.path === '/settings'
								? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200'
								: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'"
						>
							<UIcon name="i-heroicons-cog-6-tooth" class="mr-3 h-5 w-5" />
							设置
						</NuxtLink>
					</li>
				</ul>
			</nav>
			<!-- 关于 -->
			<div class="p-4 ">
				<NuxtLink
					to="/about"
					class="flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors" :class="$route.path === '/about'
						? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200'
						: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'"
				>
					<UIcon name="i-heroicons-information-circle" class="mr-3 h-5 w-5" />
					关于
				</NuxtLink>
			</div>
		</aside>

		<!-- 主体区域 -->
		<main class="flex-1 overflow-auto ml-40">
			<div class="p-6">
				<slot />
			</div>
		</main>
	</div>
</template>
