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/MenuLink';
import Link from 'next/link';

const menuItems = [
    {
        title: "Pages",
        list: [
            {
                title: "Dashboard",
                path: '/admin/dashboard',
                icon: <MdDashboard />
            },
            {
                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 >
    )
}