"use client";

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

import { cn } from "@/lib/utils";
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 (
    <nav
      className="flex w-full flex-wrap gap-1 rounded-xl border border-border/60 bg-muted/40 p-1.5"
      aria-label={t("nav.aria")}
    >
      {links.map(({ href, key }) => {
        const active = pathname === href || pathname.startsWith(`${href}/`);
        return (
          <Link
            key={href}
            href={href}
            className={cn(
              "rounded-lg px-4 py-2.5 text-sm font-medium transition-colors",
              active
                ? "bg-card text-primary shadow-sm"
                : "text-muted-foreground hover:bg-card/60 hover:text-foreground",
            )}
          >
            {t(`nav.items.${key}`)}
          </Link>
        );
      })}
    </nav>
  );
}
