"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import type { ReactNode } from "react";
import { Sidebar } from "@unlocalhosted/metalui";

export type SettingsNavItem = { href: string; label: string; icon: ReactNode };

/** The pages of a settings area: MetalUI's sidebar section, its highlight gliding to the current page. */
export function SettingsNav({ title, items }: { title: string; items: SettingsNavItem[] }) {
  const pathname = usePathname();
  return (
    <Sidebar aria-label={`${title} settings`} className="!h-auto !w-auto !p-0">
      <Sidebar.Section title={title}>
        {items.map((item) => (
          <Sidebar.Item key={item.href} icon={item.icon} active={pathname === item.href} render={<Link href={item.href} />}>
            {item.label}
          </Sidebar.Item>
        ))}
      </Sidebar.Section>
    </Sidebar>
  );
}