eab16027-0aaa-4db1-8edb-30e3f84f5f22/src/components/ui/NavbarCentered.tsx

import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { motion, AnimatePresence } from "motion/react";
import { Plus, ArrowRight } from "lucide-react";
import { cls } from "@/lib/utils";
import Button from "@/components/ui/Button";

interface NavbarCenteredProps {
  logo: string;
  navItems: { name: string; href: string }[];
  ctaButton: { text: string; href: string };
}

const NavLink = ({
  href,
  onClick,
  className,
  children,
}: {
  href: string;
  onClick?: (e: React.MouseEvent) => void;
  className: string;
  children: React.ReactNode;
}) => {
  if (href.startsWith("#")) {
    return (
      <a
        href={href}
        onClick={(e) => {
          e.preventDefault();
          const element = document.getElementById(href.slice(1));
          element?.scrollIntoView({ behavior: "smooth", block: "start" });
          onClick?.(e);
        }}
        className={className}
      >
        {children}
      </a>
    );
  }
  return (
    <Link to={href} onClick={onClick} className={className}>
      {children}
    </Link>
  );
};

const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
  const [isScrolled, setIsScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    const handleScroll = () => setIsScrolled(window.scrollY > 20);
    window.addEventListener("scroll", handleScroll, { passive: true });
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <>
      <nav
        className={cls(
          "fixed top-4 left-1/2 -translate-x-1/2 z-50 rounded-full shadow-lg pl-6 pr-2 py-2 backdrop-blur-xl border transition-all duration-300 w-[min(92vw,56rem)]",
          isScrolled ? "bg-background/80 border-foreground/10" : "bg-background/40 border-foreground/5"
        )}
      >
        <div className="flex items-center gap-6">
          <Link to="/" className="text-lg font-bold text-foreground flex-shrink-0">
            {logo}
          </Link>

          <div className="hidden md:flex items-center gap-6 flex-1 justify-center">
            {navItems.map((item) => (
              <NavLink
                key={item.name}
                href={item.href}
                className="text-sm font-medium text-foreground hover:text-foreground/70 transition-colors"
              >
                {item.name}
              </NavLink>
            ))}
          </div>

          <div className="hidden md:block flex-shrink-0">
            <Button text={ctaButton.text} href={ctaButton.href} variant="primary" className="rounded-full px-6 h-10" />
          </div>

          <button
            className="flex md:hidden items-center justify-center shrink-0 h-10 w-10 bg-foreground rounded-full cursor-pointer ml-auto"
            onClick={() => setMenuOpen(!menuOpen)}
            aria-label="Toggle menu"
            aria-expanded={menuOpen}
          >
            <Plus
              className={cls("w-5 h-5 text-background transition-transform duration-300", menuOpen ? "rotate-45" : "rotate-0")}
              strokeWidth={1.5}
            />
          </button>
        </div>
      </nav>

      <AnimatePresence>
        {menuOpen && (
          <motion.div
            initial={{ y: "-135%" }}
            animate={{ y: 0 }}
            exit={{ y: "-135%" }}
            transition={{ type: "spring", damping: 26, stiffness: 170 }}
            className="md:hidden fixed z-50 top-4 left-4 right-4 p-6 card rounded-3xl shadow-xl border border-foreground/10"
          >
            <div className="flex items-center justify-between mb-6">
              <p className="text-xl font-bold text-foreground">Menu</p>
              <button
                className="flex items-center justify-center shrink-0 h-10 w-10 bg-foreground rounded-full cursor-pointer"
                onClick={() => setMenuOpen(false)}
                aria-label="Close menu"
              >
                <Plus className="w-5 h-5 text-background rotate-45" strokeWidth={1.5} />
              </button>
            </div>

            <div className="flex flex-col gap-4">
              {navItems.map((item, index) => (
                <div key={item.name}>
                  <NavLink
                    href={item.href}
                    onClick={() => setMenuOpen(false)}
                    className="flex items-center justify-between py-2 text-base font-medium text-foreground"
                  >
                    {item.name}
                    <ArrowRight className="h-4 w-4 text-foreground" strokeWidth={1.5} />
                  </NavLink>
                  {index < navItems.length - 1 && (
                    <div className="h-px bg-foreground/10" />
                  )}
                </div>
              ))}
            </div>

            <div className="mt-6">
              <Button text={ctaButton.text} href={ctaButton.href} variant="primary" className="w-full rounded-full h-12" />
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
};

export default NavbarCentered;