"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";

const Navbar = () => {
  const [isScrolled, setIsScrolled] = useState(false);
  const pathname = usePathname();

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 10);
    };

    window.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  const navLinks = [
    { href: "/", label: "Home" },
    { href: "/projects", label: "Projects" },
    {
      href: "https://blog.gabrielkaszewski.dev/",
      label: "Blog",
      external: true,
    },
    { href: "/about", label: "About" },
  ];

  const baseClasses =
    "fixed z-20 flex w-full items-center justify-center p-4 transition-all duration-300";
  const scrolledClasses = "bg-gray-900/80 backdrop-blur-md";
  const transparentClasses = "bg-transparent";

  return (
    <nav
      className={`${baseClasses} ${
        isScrolled ? scrolledClasses : transparentClasses
      }`}
    >
      <div className="flex flex-1"></div>
      <div className="flex gap-4">
        {navLinks.map((link) => {
          const isActive = pathname === link.href;
          const linkClasses = `text-lg hover:text-yellow-400 transition-colors ${
            isActive ? "text-yellow-400 font-semibold" : "text-white"
          }`;

          if (link.external) {
            return (
              <a
                key={link.href}
                href={link.href}
                className={linkClasses}
                target="_blank"
                rel="noopener noreferrer"
              >
                {link.label}
              </a>
            );
          }

          return (
            <Link key={link.href} href={link.href} className={linkClasses}>
              {link.label}
            </Link>
          );
        })}
      </div>
    </nav>
  );
};

export default Navbar;