"use client";

import { useState } from "react";
import { Link as ScrollLink } from "react-scroll";
import { primaryNav } from "@/data/common/onepage-nav";

type NavItemsProps = {
  onNavigate?: () => void;
};

/** Onepage scroll nav items for desktop + mobile menus. */
export default function NavItems({ onNavigate }: NavItemsProps) {
  const [activeId, setActiveId] = useState(primaryNav[0]?.href ?? "home");

  return (
    <>
      {primaryNav.map((item) => {
        const active = activeId === item.href;
        return (
          <li key={item.href} className={active ? "active" : undefined}>
            <ScrollLink
              to={item.href}
              spy
              smooth
              duration={500}
              offset={-90}
              className={active ? "active" : undefined}
              onSetActive={() => setActiveId(item.href)}
              onClick={onNavigate}
            >
              {item.label}
            </ScrollLink>
          </li>
        );
      })}
    </>
  );
}