import { lazy } from "react";
import Course from "../view/Course";
import { Login } from "../view/Login";

export interface IRouteMenuItem {
  path: string;
  name: string;
}

interface IRoute extends IRouteMenuItem {
  element: JSX.Element | any;
  invisible?: boolean;
}

export const commonRouters: IRoute[] = [
  {
    path: "/login",
    element: <Login />,
    name: "登录",
    invisible: true,
  },
  {
    path: "/",
    element: <Course />,
    name: "学习",
  },
];

export const lazyRouters: IRoute[] = [
  // {
  //   path: "/topic",
  //   element: lazy(() => import("../view/Topic")),
  //   name: "讨论",
  // },
  {
    path: "/subscribe",
    element: lazy(() => import("../view/Subscribe")),
    name: "订阅",
  },
  {
    path: "/course/detail/:id",
    element: lazy(() => import("../view/CourseDetail")),
    name: "课程详情",
    invisible: true,
  },
];

export const menuRouters = [...commonRouters, ...lazyRouters].map((route) => {
  const { name, path } = route;
  const invisible = "invisible" in route ? route.invisible : false;
  return { name, path, invisible };
});