<script lang="ts">
	import Icon from '@iconify/svelte';
	import SettingsSidebar from './SettingsSidebar.svelte';
	import AppearenceSettings from './Appearence/AppearenceSettings.svelte';
	import AboutSettings from './About/AboutSettings.svelte';
	import ArxletHeader from '$lib/components/ArxletHeader.svelte';
	import LiquidGlass from '$lib/components/LiquidGlass.svelte';
	import SystemSettings from './System/SystemSettings.svelte';

	let currentTab = $state('appearance');
</script>

<ArxletHeader
	title="Settings"
	subtitle="Customize your Eve experience"
	icon="mdi:cog"
	iconColor="#3b82f6"
/>

<LiquidGlass class="min-h-full">
	<div class="max-w-6xl mx-auto p-6">
		<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
			<SettingsSidebar bind:currentTab />
			<div class="lg:col-span-9 space-y-8 overflow-auto">
				{#if currentTab === 'appearance'}
					<AppearenceSettings />
				{:else if currentTab === 'about'}
					<AboutSettings />
				{:else if currentTab === 'system'}
					<SystemSettings />
				{:else if currentTab === 'accessibility'}
					<div class="bg-base-200 rounded-xl p-6">
						<div class="flex items-center gap-3 mb-6">
							<Icon icon="mdi:eye" class="w-6 h-6 text-primary" />
							<h2 class="text-xl font-semibold text-base-content">Accessibility</h2>
						</div>
						<p class="text-base-content/70">Coming soon...</p>
					</div>
				{/if}
			</div>
		</div>
	</div>
</LiquidGlass>
