import type { ComponentType } from "svelte";

import { type Icon } from "lucide-svelte";
import BarChart2 from "lucide-svelte/icons/bar-chart-2";
import Code from "lucide-svelte/icons/code";
import  GitBranch from "lucide-svelte/icons/git-branch";
import LayoutDashboard from "lucide-svelte/icons/layout-dashboard";
import LifeBuoy from "lucide-svelte/icons/life-buoy";

export type NavItem = {
  name: string;
  icon?: ComponentType<Icon>;
  href?: string;
  disabled?: boolean;
  external?: boolean;
}

export type NavItemWithChildren = NavItem & {
  children?: NavItemWithChildren[];
}

export type Navigation = NavItem[];

export const navigation: NavItemWithChildren[] = [
  {
    name: "Dashboard",
    href: "/",
    icon: LayoutDashboard
  },
  {
    name: "Classement",
    href: "/leaderboard",
    icon: BarChart2
  },
  {
    name: "Challenges",
    href: "/chapters",
    icon: Code
  },
  {
    name: "Documentation",
    children: [
      {
        name: "Git",
        href: "/git",
        external: true,
        icon: GitBranch
      },
      {
        name: "Discord",
        href: "/discord",
        external: true,
        icon: LifeBuoy
      }
    ]
  }
]