"use client";

import { useState } from "react";
import { Link as ScrollLink } from "react-scroll";
import { onepageMenuData } from "@/data/onepageMenuData";

export default function NavigationMenuWidget() {
  const [activeTargetId, setActiveTargetId] = useState(onepageMenuData[0]?.targetId ?? "home");

  return (
    <div className="col-lg-6">
      <nav className="main-menu11 menu-style11" aria-label="Main Navigation">
        <ul>
          {onepageMenuData.map((menu) => (
            <li key={menu.id} className={activeTargetId === menu.targetId ? "active" : ""}>
              <ScrollLink
                to={menu.targetId}
                spy={true}
                smooth={true}
                offset={-90}
                duration={500}
                style={{ cursor: "pointer" }}
                className={activeTargetId === menu.targetId ? "active" : ""}
                onSetActive={(to: string) => setActiveTargetId(to)}
              >
                {menu.label}
              </ScrollLink>
            </li>
          ))}
        </ul>
      </nav>
    </div>
  );
}