"use client";

import { usePathname, useRouter } from "next/navigation";
import { CONFIG_GROUPS } from "../admin/configNavigation";

export default function SettingsNavigation() {
  const pathname = usePathname();
  const router = useRouter();
  const current = CONFIG_GROUPS.flatMap((group) => group.items).find((item) => item.href === pathname);
  if (pathname === "/admin") return null;
  return (
    <nav className="settings-top-navigation" aria-label="Settings navigation">
      <a href="/admin">← All settings</a>
      <label>
        <span>Jump to</span>
        <select
          aria-label="Settings section"
          value={current?.href ?? "/admin"}
          onChange={(event) => router.push(event.target.value)}
        >
          <option value="/admin">Settings overview</option>
          {CONFIG_GROUPS.map((group) => (
            <optgroup label={group.title} key={group.title}>
              {group.items.map((item) => (
                <option key={item.href} value={item.href}>
                  {item.label}
                </option>
              ))}
            </optgroup>
          ))}
        </select>
      </label>
    </nav>
  );
}