import type { ComponentType, HTMLAttributes } from "react";

import { ActivityIcon } from "@/components/icons/activity";
import { BookTextIcon } from "@/components/icons/book-text";
import { EarthIcon } from "@/components/icons/earth";
import { LayersIcon } from "@/components/icons/layers";
import { LayoutGridIcon } from "@/components/icons/layout-grid";
import { ShieldCheckIcon } from "@/components/icons/shield-check";
import { WalletIcon } from "@/components/icons/wallet";
import { WaypointsIcon } from "@/components/icons/waypoints";

export type NavIcon = ComponentType<
  HTMLAttributes<HTMLDivElement> & { size?: number }
>;

export interface NavItem {
  label: string;
  href: string;
  icon: NavIcon;
}

export interface NavGroup {
  label: string;
  items: NavItem[];
}

/** Portal zone navigation — all routes live under /portal */
export const NAV_GROUPS: NavGroup[] = [
  {
    label: "Explore",
    items: [
      { label: "Overview", href: "/portal", icon: ActivityIcon },
      { label: "Explorer", href: "/portal/explorer", icon: EarthIcon },
      { label: "Hybrid stack", href: "/portal/hybrid", icon: LayersIcon },
    ],
  },
  {
    label: "Learn",
    items: [
      {
        label: "How It Works",
        href: "/portal/how-it-works",
        icon: WaypointsIcon,
      },
      {
        label: "Architecture",
        href: "/portal/architecture",
        icon: LayersIcon,
      },
      { label: "Docs", href: "/portal/docs", icon: BookTextIcon },
    ],
  },
  {
    label: "Account",
    items: [
      {
        label: "Sign in",
        href: "/portal/sign-in",
        icon: WalletIcon,
      },
      {
        label: "Connect Wallet",
        href: "/portal/connect-wallet",
        icon: WalletIcon,
      },
      {
        label: "mavi wallet",
        href: "/portal/mavi",
        icon: WalletIcon,
      },
      { label: "Dashboard", href: "/portal/dashboard", icon: LayoutGridIcon },
      {
        label: "Machine auth",
        href: "/portal/machine-auth",
        icon: ShieldCheckIcon,
      },
      { label: "Services", href: "/portal/services", icon: LayersIcon },
    ],
  },
];