import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';
import { defineAsyncComponent } from 'vue';

const home = defineAsyncComponent(() => import('@/views/Home.vue'));
const login = defineAsyncComponent(() => import('@/views/Login.vue'));
const courseList = defineAsyncComponent(() => import('@/views/CourseList.vue'));
const courseDetail = defineAsyncComponent(() => import('@/views/CourseDetail.vue'));

const routes = [
  {
    path: '/',
    name: 'Home',
    component: home,
  },
  {
    path: '/login',
    name: 'Login',
    component: login,
  },
  {
    path: '/course-list',
    name: 'CourseList',
    component: courseList
  },
  {
    path: '/course-detail/:id',
    name: 'CourseDetail',
    component: courseDetail
  },
];

const router = createRouter({
  // history: createWebHashHistory(),
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
});

export default router;