import { navLinks } from '../data/content';
import { ThemeToggle } from './ThemeToggle';
import { handleAnchorClick } from '../utils/scrollToHash';

export function Nav() {
  return (
    <nav className="sticky top-0 z-50 border-b border-line bg-bg/80 backdrop-blur-md">
      <div className="mx-auto flex h-16 max-w-[1080px] items-center justify-between px-6">
        <a
          href="#top"
          onClick={(event) => handleAnchorClick(event, '#top')}
          className="font-mono text-base font-bold tracking-wide text-text"
        >
          SLP<span className="text-accent">.</span>Software
        </a>
        <ul className="flex items-center gap-7">
          {navLinks.map((link) =>
            link.isCta ? (
              <li key={link.href}>
                <a
                  href={link.href}
                  onClick={(event) => handleAnchorClick(event, link.href)}
                  className="font-mono rounded-lg border border-accent-line bg-accent-soft px-4 py-2 text-sm font-medium text-text"
                  data-testid="nav-cta-link"
                >
                  {link.label}
                </a>
              </li>
            ) : (
              <li key={link.href} className="hidden sm:block">
                <a
                  href={link.href}
                  onClick={(event) => handleAnchorClick(event, link.href)}
                  className="text-sm font-medium text-muted transition-colors hover:text-text"
                >
                  {link.label}
                </a>
              </li>
            ),
          )}
          <li>
            <ThemeToggle />
          </li>
        </ul>
      </div>
    </nav>
  );
}