import Link from "next/link";
import Logo from "./logo";

const Navbar = () => {
  const links = [
    { name: "About", href: "#about" },
    { name: "Clients", href: "#clients" },
    { name: "Pricing", href: "#pricing" },
    { name: "Contact", href: "#contact" },
  ];
  return (
    <nav className="hidden flex-col gap-6 w-full text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
      <Logo text="ATOM" showText />
      <div className="flex items-center justify-center gap-2 w-full">
        {links.map((link) => (
          <Link
            key={link.name}
            href={link.href}
            className="text-muted-foreground transition-colors hover:text-foreground"
          >
            {link.name}
          </Link>
        ))}
      </div>
    </nav>
  );
};

export default Navbar;