"use client";

import { usePathname } from "next/navigation";

const LINKS: { href: string; label: string }[] = [
  { href: "/", label: "The Floor" },
  { href: "/library", label: "Library" },
  { href: "/artists", label: "Artists" },
  { href: "/discover", label: "Discover" },
  { href: "/wanted", label: "Wanted" },
];

export function ContentsNav() {
  const pathname = usePathname();
  const active = (href: string) => (href === "/" ? pathname === "/" : pathname.startsWith(href));
  return (
    <nav className="contents">
      {LINKS.map((l) => (
        <a key={l.href} href={l.href} className={active(l.href) ? "here" : ""}>
          {l.label}
        </a>
      ))}
      <span className="sep" />
      <a href="/settings" className={active("/settings") ? "here" : ""}>
        Settings
      </a>
    </nav>
  );
}