"use client";

import DashboardIcon from "@mui/icons-material/Dashboard";
import { useState } from "react";
import { PAGE_LINKS } from "@/app/features/dashboard/sidebar/SidebarLink.constants";
import PageLinks from "../../../components/PageLinks/PageLinks";
import "./sideBar.scss";
import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";

const SideBar = () => {
  const [openMenus, setOpenMenus] = useState<Record<string, boolean>>({});

  const toggleMenu = (title: string) => {
    setOpenMenus(prev => ({ ...prev, [title]: !prev[title] }));
  };

  return (
    <aside className="sidebar">
      <div className="sidebar__header">
        <span>
          Betrise cashir
          <DashboardIcon fontSize="small" className="sidebar__icon-spacing" />
        </span>
      </div>

      {PAGE_LINKS.map(link =>
        link.children ? (
          <div key={link.title}>
            <button
              onClick={() => toggleMenu(link.title)}
              className="sidebar__dropdown-button"
            >
              {link.icon && <link.icon />}
              <span className="sidebar__text">{link.title}</span>
              <span className="sidebar__arrow">
                {!openMenus[link.title] ? (
                  <KeyboardArrowRightIcon />
                ) : (
                  <KeyboardArrowDownIcon />
                )}
              </span>
            </button>
            {openMenus[link.title] && (
              <div className="sidebar__submenu">
                {link.children.map(child => (
                  <PageLinks
                    key={child.path}
                    title={child.title}
                    path={child.path}
                    icon={child.icon}
                  />
                ))}
              </div>
            )}
          </div>
        ) : (
          <PageLinks
            key={link.path}
            title={link.title}
            path={link.path}
            icon={link.icon}
          />
        )
      )}
    </aside>
  );
};

export default SideBar;