"use client";

import { useTheme } from "next-themes";
import Image from "next/image";
import Link from "next/link";

const Navbar = () => {
  const { theme } = useTheme();
  const links = [
    { name: "Home", href: "#" },
    { name: "About", href: "#" },
    { name: "Projects", href: "#" },
    { name: "Testimonials", href: "#" },
    { name: "Contact", href: "#" },
  ];
  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">
      <Link
        href="#"
        className="flex items-center justify-start gap-2 text-lg h-12 w-12"
      >
        <Image
          src={theme === "dark" ? "/logo-white.png" : "/logo.png"}
          width={48}
          height={48}
          alt="logo"
        />
        <span className="sr-only">ATOM</span>
      </Link>
      <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;