import { createRouter, createWebHistory } from "vue-router";

const AppLayout = () => import("@/components/Layout/AppLayout.vue");
const Dashboard = () => import("@/views/Dashboard.vue");
const Settings = () => import("@/views/Settings.vue");

const routes = [
  {
    path: "/",
    component: AppLayout,
    children: [
      {
        path: "",
        name: "Dashboard",
        component: Dashboard,
        meta: {
          title: "Dashboard"
        }
      },
      {
        path: "settings",
        name: "Settings",
        component: Settings,
        meta: {
          title: "Settings"
        }
      }
    ]
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

router.afterEach(to => {
  const title = to.meta?.title;
  if (typeof title === "string" && title) {
    document.title = `${title} - {{project_title}}`;
  }
});

export default router;
