"use client";

import { scrollToSection } from "@/lib/utils";
import { useTranslations } from "next-intl";
import { navigationConfig } from "./headerConfig";

export default function DesktopNavigation() {
  const t = useTranslations("header.navigation");

  const navigationItems = navigationConfig.map((item) => ({
    ...item,
    label: t(item.key),
  }));

  const handleClick = (
    e: React.MouseEvent<HTMLAnchorElement>,
    href: string
  ) => {
    e.preventDefault();
    scrollToSection(href.slice(1), 100);
  };

  return (
    <nav className="text-text hidden lg:flex gap-2">
      <ul className="flex gap-2">
        {navigationItems.map((item) => (
          <li key={item.key} className="text-[14px] px-2 py-1">
            <a
              href={item.href}
              onClick={(e) => handleClick(e, item.href)}
              className="hover:text-primary-main transition-colors cursor-pointer"
            >
              {item.label}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
}