<script lang="ts">
	import { onMount } from 'svelte';

	import Icon from '@iconify/svelte';
	import ThemeSettings from './ThemeSettings.svelte';
	import BackgroundSettings from './BackgroundSettings.svelte';
	import FontSettings from './FontSettings.svelte';
	import LiquidGlass from '$lib/components/LiquidGlass.svelte';
</script>

<ThemeSettings />

<BackgroundSettings />

<FontSettings />

<LiquidGlass class="rounded-xl p-6 opacity-50">
	<div class="flex items-center gap-3 mb-4">
		<Icon icon="mdi:dots-horizontal" class="w-6 h-6 text-base-content" />
		<div>
			<h2 class="text-xl font-semibold text-base-content">More Settings</h2>
			<p class="text-base-content/70 text-sm">Additional customization options coming soon</p>
		</div>
	</div>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
		<div class="bg-base-100 p-4 rounded-lg">
			<h3 class="font-medium text-base-content mb-2">Notifications</h3>
			<p class="text-sm text-base-content/60">Manage your notification preferences</p>
		</div>
		<div class="bg-base-100 p-4 rounded-lg">
			<h3 class="font-medium text-base-content mb-2">Advanced</h3>
			<p class="text-sm text-base-content/60">Developer and power user options</p>
		</div>
	</div>
</LiquidGlass>
