import React from "react";
import { RxHamburgerMenu } from "react-icons/rx";
import {
  MdDashboard,
  MdSupervisedUserCircle,
  MdShoppingBag,
  MdAttachMoney,
  MdWork,
  MdAnalytics,
  MdPeople,
  MdOutlineSettings,
  MdHelpCenter,
} from "react-icons/md";
import MenuLinks from "../../page/menu-link";
import Link from "next/link";
import { DashboardIcon } from "@/components/icons/sidebar-icon";

const menuItems = [
  {
    title: "Pages",
    list: [
      {
        title: "Dashboard",
        path: "/admin/dashboard",
        // icon: <DashboardIcon />,
      },
      {
        title: "Users",
        path: "/dashboard/users",
        // icon: <MdSupervisedUserCircle />,
      },
      {
        title: "Producst",
        path: "/dashboard/producst",
        // icon: <MdShoppingBag />,
      },
      {
        title: "Transactions",
        path: "/dashboard/transactions",
        // icon: <MdAttachMoney />,
      },
    ],
  },
  {
    title: "Analytics",
    list: [
      {
        title: "Revenue",
        path: "/dashboard/revenue",
        // icon: <MdWork />,
      },
      {
        title: "Reports",
        path: "/dashboard/reports",
        // icon: <MdAnalytics />,
      },
      {
        title: "Teams",
        path: "/dashboard/teams",
        // icon: <MdPeople />,
      },
    ],
  },
  {
    title: "User",
    list: [
      {
        title: "Settings",
        path: "/dashboard/settings",
        // icon: <MdOutlineSettings />,
      },
      {
        title: "Help",
        path: "/dashboard/help",
        // icon: <MdHelpCenter />,
      },
    ],
  },
];

export default function HumasSidebarWrapper() {
  return (
    <aside className="w-1/4 dark:text-white bg-slate-200  border-gray-700 dark:bg-[#182237] h-screen overflow-y-auto custom-scrollbar p-3 space-y-7">
      <div className="flex">
        <div className="w-full flex justify-center">
          <Link href="/">
            <img src="/logohumas.png" alt="log" />
          </Link>
        </div>
        <div>{/* <RxHamburgerMenu size={28} /> */}</div>
      </div>
      <div>
        <ul className="p-2 space-y-3">
          {/* {menuItems.map((category) => (
            <li className="space-y-1" key={category.title}>
              <span>{category.title}</span>
              {category.list.map((item) => (
                <MenuLinks item={item} key={item.title} />
              ))}
            </li>
          ))} */}
        </ul>
      </div>
    </aside>
  );
}