<template>
    <div class="space-y-6">
        <div>
            <h1 class="text-2xl font-black text-zinc-800">Settings</h1>
            <p class="text-zinc-500 mt-1">Manage your account and preferences.</p>
        </div>

        <div class="flex gap-6">
            <!-- Settings sub-nav -->
            <aside class="w-44 shrink-0">
                <nav class="space-y-1">
                    <RouterLink
                        v-for="item in settingsNav"
                        :key="item.to"
                        :to="item.to"
                        class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-bold transition-colors"
                        :class="$route.path === item.to
                            ? 'bg-accent text-white'
                            : 'text-zinc-500 hover:bg-white hover:text-zinc-800'"
                    >
                        <iconify-icon :icon="item.icon"></iconify-icon>
                        {{ item.label }}
                    </RouterLink>
                </nav>
            </aside>

            <!-- Settings content -->
            <div class="flex-1 min-w-0">
                <RouterView />
            </div>
        </div>
    </div>
</template>

<script setup>
import { RouterLink, RouterView, useRoute } from 'vue-router'

const $route = useRoute()

const settingsNav = [
    { to: '/dashboard/settings/profile', label: 'Profile', icon: 'lucide:user' },
    { to: '/dashboard/settings/security', label: 'Security', icon: 'lucide:shield' },
    { to: '/dashboard/settings/appearance', label: 'Appearance', icon: 'lucide:sun-moon' },
]
</script>
