import { NavLink, useLocation } from "react-router-dom";
import { useI18n } from "../../i18n/I18nContext";
import { isNavActive, navGroups, navItemsByKeys } from "../../lib/nav";
import { AppIcon } from "../ui/AppIcons";

export function SidebarNav() {
  const { pathname } = useLocation();
  const { t } = useI18n();

  return (
    <aside className="hb-sidebar" aria-label={t("nav.navigate")}>
      <p className="hb-sidebar__label display-en">{t("nav.navigate")}</p>
      {navGroups.map((group) => (
        <div className="hb-nav__group" key={group.key}>
          <p className="hb-nav__group-label">{t(group.labelKey)}</p>
          <nav className="hb-nav">
            {navItemsByKeys(group.keys).map((item) => {
              const active = isNavActive(pathname, item);
              return (
                <NavLink
                  key={item.key}
                  to={item.path}
                  className={`hb-nav__item${active ? " hb-nav__item--active" : ""}`}
                >
                  <span className="hb-nav__ico" aria-hidden>
                    <AppIcon name={item.key} size={18} />
                  </span>
                  <span>{t(item.labelKey)}</span>
                </NavLink>
              );
            })}
          </nav>
        </div>
      ))}
    </aside>
  );
}
