"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { clsx } from "clsx";

/** Seitennavigation der Einstellungen. */
const ITEMS = [
  { href: "/einstellungen", label: "Profil" },
  { href: "/einstellungen/benachrichtigungen", label: "Benachrichtigungen" },
  { href: "/einstellungen/api", label: "API-Schlüssel" },
  { href: "/einstellungen/daten", label: "Import und Export" },
];

export function SettingsNav({ isAdmin }: { isAdmin: boolean }) {
  const pathname = usePathname();

  return (
    <nav
      aria-label="Einstellungen"
      className="flex gap-1 overflow-x-auto lg:flex-col lg:overflow-visible"
    >
      {ITEMS.map((item) => {
        const active = pathname === item.href;
        return (
          <Link
            key={item.href}
            href={item.href}
            aria-current={active ? "page" : undefined}
            className={clsx(
              "shrink-0 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
              active
                ? "bg-[var(--fl-surface-2)] text-[var(--fl-text)]"
                : "text-[var(--fl-muted)] hover:bg-[var(--fl-surface-2)] hover:text-[var(--fl-text)]",
            )}
          >
            {item.label}
          </Link>
        );
      })}

      {isAdmin && (
        <Link
          href="/verwaltung"
          className="shrink-0 rounded-lg px-3 py-2 text-sm font-medium text-[var(--fl-muted)] transition-colors hover:bg-[var(--fl-surface-2)] hover:text-[var(--fl-text)]"
        >
          Verwaltung
        </Link>
      )}
    </nav>
  );
}