import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import DashboardLayout from '../views/dashboard/DashboardLayout.vue'
import Overview from '../views/dashboard/Overview.vue'
import SavedStations from '../views/dashboard/SavedStations.vue'
import Preferences from '../views/dashboard/Preferences.vue'
import SettingsLayout from '../views/dashboard/settings/SettingsLayout.vue'
import Profile from '../views/dashboard/settings/Profile.vue'
import Security from '../views/dashboard/settings/Security.vue'
import Appearance from '../views/dashboard/settings/Appearance.vue'

const routes = [
    { path: '/', component: Home, name: 'home' },
    {
        path: '/dashboard',
        component: DashboardLayout,
        children: [
            { path: '', component: Overview, name: 'dashboard' },
            { path: 'saved-stations', component: SavedStations, name: 'dashboard.saved-stations' },
            { path: 'preferences', component: Preferences, name: 'dashboard.preferences' },
            {
                path: 'settings',
                component: SettingsLayout,
                redirect: '/dashboard/settings/profile',
                children: [
                    { path: 'profile', component: Profile, name: 'dashboard.settings.profile' },
                    { path: 'security', component: Security, name: 'dashboard.settings.security' },
                    { path: 'appearance', component: Appearance, name: 'dashboard.settings.appearance' },
                ],
            },
        ],
    },
]

export default createRouter({
    history: createWebHistory(),
    routes,
})