"use client";

import { useUmami } from "@danielgtmn/umami-react";
import Link from "next/link";
import { usePathname } from "next/navigation";

export function Navbar() {
  const pathname = usePathname();
  const { track } = useUmami();

  const navItems = [
    { label: "Home", path: "/" },
    { label: "Projects", path: "/projects" },
    { label: "Blog", path: "/blogs" },
    { label: "Connect", path: "/contact" },
  ];

  const handleSwitch = (path: string) => {
    track("nav_to_" + path.replaceAll("/", "root"));
  };

  return (
    <nav className="fixed top-4 left-1/2 z-[100] w-[min(100vw-1rem,460px)] -translate-x-1/2 sm:top-8 sm:w-[min(90%,460px)]">
      <div className="bg-black/20 backdrop-blur-xl border border-white/10 rounded-full px-3 py-2 sm:px-6 sm:py-3 flex items-center justify-between gap-2 sm:gap-4 shadow-2xl">
        {navItems.map((item) => (
          <Link
            key={item.path}
            href={item.path}
            onClick={() => handleSwitch(item.path)}
            className={`flex-1 text-center text-xs sm:text-sm font-semibold transition-all duration-300 px-3 py-2 rounded-full 
              ${
                pathname === item.path
                  ? "bg-white text-black scale-105 shadow-xl shadow-white/10"
                  : "text-gray-400 hover:text-white"
              }`}
          >
            {item.label}
          </Link>
        ))}
      </div>
    </nav>
  );
}