"use client";

import { usePathname } from "next/navigation";
import { useTranslation } from "react-i18next";

import { AdminSubnav, AdminSubnavLink } from "@/components/admin/admin-subnav";
import { CONFIG_NAV_GROUPS } from "@/modules/config/config-nav-model";

export function ConfigSubNav() {
  const { t } = useTranslation("config");
  const pathname = usePathname();
  const links = CONFIG_NAV_GROUPS.flatMap((group) => group.items);

  return (
    <AdminSubnav aria-label={t("nav.aria")}>
      {links.map(({ href, key }) => {
        const active = pathname === href || pathname.startsWith(`${href}/`);
        return (
          <AdminSubnavLink key={href} href={href} active={active}>
            {t(`nav.items.${key}`)}
          </AdminSubnavLink>
        );
      })}
    </AdminSubnav>
  );
}