import React from "react";
import { SidebarMenu } from "@/components/ui/sidebar";
import { NavItem } from "@/components/layout/dashboard/types/nav-item";
import { NavMenuItem } from "@/components/layout/dashboard/nav-menu-item";
import { NavMenuSubitem } from "@/components/layout/dashboard/nav-menu-subitem";

type NavMenuProps = {
    mobile?: boolean;
    collapsed?: boolean;
    items: NavItem[];
};

export const NavMenu: React.FC<NavMenuProps> = (props) => {
    const {
        mobile: isMobile,
        collapsed: isCollapsed,
        items
    } = props;

    return (
        <SidebarMenu>
            {items.map((item, index) => {
                const {
                    items = []
                } = item;

                return (
                    <NavMenuItem
                      key={index}
                      mobile={isMobile}
                      collapsed={isCollapsed}
                      data={item}>
                        {items.map((subitem, index) => {
                            return (
                                <NavMenuSubitem
                                  key={index}
                                  data={subitem} />
                            );
                        })}
                    </NavMenuItem>
                );
            })}
        </SidebarMenu>
    );
};