import { useState } from "react";
import { Menu } from "./ui/navbar-menu";
import { cn } from "../lib/utils";
import { Link, useLocation } from "react-router-dom";
import { motion } from "framer-motion";

export function NavbarDemo() {
  return (
    <div className="relative w-full flex items-center justify-center">
      <Navbar className="top-6 shadow-lg" />
    </div>
  );
}

function Navbar({ className }: { className?: string }) {
  const [active, setActive] = useState<string | null>(null);
  const location = useLocation(); // To track the current active page

  // Map of links to their path (for active state comparison)
  const links = [
    { label: "Home", path: "#" },
    { label: "Features", path: "#agents" },
    { label: "Tokenomics", path: "#tokenomics" },
    { label: "Roadmap", path: "#roadmap" },
  ];

  return (
    <div
      className={cn(
        "fixed top-10 inset-x-0 lg:max-w-7xl max-w-2xl mx-auto z-50 rounded-lg bg-gradient-to-r from-yellow-300 to-yellow-100",
        className
      )}
    >
      <Menu setActive={setActive}>
        <div className="flex justify-between">
          <div className="flex items-center space-x-8">
            <a href="/">
              <img src="/logo.svg" alt="logo" className="w-36" />
            </a>

            {/* Navbar Links */}
            <div className="flex items-center space-x-8">
              {links.map(({ label, path }) => {
                const isActive = location.pathname === path;

                return (
                  <motion.div
                    key={label}
                    whileHover={{
                      scale: 1.05, // Scale slightly on hover
                      transition: {
                        type: "spring",
                        stiffness: 300,
                        damping: 20,
                      },
                    }}
                    className="relative hover:border-b-2 border-neutral-800 duration-100"
                  >
                    <a href={path}>
                      <p
                        className={`${
                          isActive ? "text-amber-500" : "text-gray-800"
                        } transition-colors duration-300 font-medium font-orbitron`}
                      >
                        {label}
                      </p>
                    </a>

                    {/* Animated Underline for active link */}
                    {isActive && (
                      <motion.div
                        className="absolute bottom-0 left-0 w-full h-[2px] bg-amber-500"
                        initial={{ width: 0 }}
                        animate={{ width: "100%" }}
                        transition={{ duration: 0.4 }}
                      />
                    )}
                  </motion.div>
                );
              })}
            </div>
          </div>

          {/* Social Icons with animation to slide in from the right */}
          <div className="flex items-center space-x-3 justify-end">
            {["gitbook.svg", "github.svg", "X.svg"].map((src, index) => (
              <motion.a
                href={
                  src === "gitbook.svg"
                    ? "https://equilink.gitbook.io"
                    : src === "github.svg"
                    ? "https://github.com/Equilink-Suite"
                    : ""
                }
                target="_blank"
                key={index}
                className="p-3 border-[1px] hover:bg-yellow-400 rounded-xl bg-white shadow-lg"
                initial={{ opacity: 0, x: 20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{
                  delay: index * 0.2,
                  type: "spring",
                  stiffness: 300,
                }}
                whileHover={{
                  scale: 1.1, // This is the Framer Motion scale on hover
                  transition: { duration: 0.2 }, // Smooth transition
                }}
              >
                <img src={`/${src}`} className="w-6 h-auto" />
              </motion.a>
            ))}
          </div>
        </div>
      </Menu>
    </div>
  );
}
