"use client";

import { useTranslations } from "next-intl";
import { usePathname } from "next/navigation";

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

  const navigationItems = [
    { label: t("features"), href: "#features", key: "features" },
    { label: t("pricing"), href: "#pricing", key: "pricing" },
    { label: t("about"), href: "#about", key: "about" },
    { label: t("howItWorks"), href: "#how-it-works", key: "howItWorks" },
  ];

  const handleClick = (
    e: React.MouseEvent<HTMLAnchorElement>,
    href: string
  ) => {
    e.preventDefault();
    const element = document.querySelector(href);
    if (element) {
      const headerOffset = 100;
      const elementPosition = element.getBoundingClientRect().top;
      const offsetPosition =
        elementPosition + window.pageYOffset - headerOffset;

      window.scrollTo({
        top: offsetPosition,
        behavior: "smooth",
      });
    }
  };

  return (
    <nav className="text-white hidden lg:flex gap-3">
      <ul className="flex gap-2">
        {navigationItems.map((item) => (
          <li key={item.key} className="text-[14px] p-2">
            <a
              href={`${pathname}${item.href}`}
              onClick={(e) => handleClick(e, item.href)}
              className="hover:opacity-80 transition-opacity cursor-pointer"
            >
              {item.label}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
}