"use client";
import Link from "next/link";
import { useState, type ComponentType } from "react";
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";

interface NavbarProps {
  navShadow: boolean;
  ArrowRightIcon: ComponentType<React.SVGProps<SVGSVGElement>>;
}

export default function Navbar({ navShadow, ArrowRightIcon }: NavbarProps) {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  const scrollToSection = (sectionId: string) => {
    const element = document.getElementById(sectionId);
    if (element) {
      element.scrollIntoView({ behavior: "smooth" });
    }
    // Close mobile menu after clicking a link
    setIsMobileMenuOpen(false);
  };

  const toggleMobileMenu = () => {
    setIsMobileMenuOpen(!isMobileMenuOpen);
  };

  return (
    <nav
      className={`fixed top-0 left-0 right-0 z-50 bg-gray-900/80 backdrop-blur-xl border-b border-gray-800/50 transition-all duration-500 ${
        navShadow ? "shadow-2xl shadow-black/50 bg-gray-900/90" : ""
      }`}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-20">
          {/* Logo */}
          <div className="flex items-center">
            <Link
              href="/"
              className="text-2xl sm:text-3xl font-bold bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent hover:from-cyan-300 hover:to-purple-300 transition-all duration-300"
            >
              SpotMe
            </Link>
          </div>

          {/* Desktop Navigation */}
          <div className="hidden md:flex space-x-8">
            {["Features", "How It Works", "Events", "About", "Pricing"].map(
              (item, index) => (
                <button
                  key={item}
                  onClick={() =>
                    scrollToSection(item.toLowerCase().replaceAll(" ", "-"))
                  }
                  className="text-gray-300 hover:text-cyan-400 px-4 py-2 text-sm font-medium transition-all duration-300 hover:scale-105 relative group"
                >
                  {item}
                  <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-cyan-400 to-purple-400 group-hover:w-full transition-all duration-300"></span>
                </button>
              )
            )}
          </div>

          {/* Desktop Auth Buttons */}
          <div className="hidden md:flex items-center space-x-4">
            <Link
              href="/sign-in"
              className="text-gray-300 hover:text-cyan-400 px-4 py-2 text-sm font-medium transition-all duration-300 hover:scale-105"
            >
              Sign In
            </Link>
            <Link
              href="/sign-up"
              className="bg-gradient-to-r from-cyan-500 to-purple-500 hover:from-cyan-600 hover:to-purple-600 text-white px-6 py-3 rounded-2xl text-sm font-medium transition-all duration-300 transform hover:scale-105 hover:shadow-xl hover:shadow-cyan-500/25 group"
            >
              <span className="flex items-center gap-2">
                Get Started
                <ArrowRightIcon className="w-4 h-4 group-hover:translate-x-1 transition-transform duration-300" />
              </span>
            </Link>
          </div>

          {/* Mobile Menu Button */}
          <div className="md:hidden">
            <button
              onClick={toggleMobileMenu}
              className="text-gray-300 hover:text-cyan-400 p-2 transition-all duration-300"
              aria-label="Toggle mobile menu"
            >
              {isMobileMenuOpen ? (
                <XMarkIcon className="w-6 h-6" />
              ) : (
                <Bars3Icon className="w-6 h-6" />
              )}
            </button>
          </div>
        </div>

        {/* Mobile Navigation Menu */}
        <div
          className={`md:hidden transition-all duration-300 ease-in-out ${
            isMobileMenuOpen
              ? "max-h-screen opacity-100 visible"
              : "max-h-0 opacity-0 invisible"
          }`}
        >
          <div className="py-4 space-y-4 border-t border-gray-800/50">
            {/* Mobile Navigation Links */}
            <div className="space-y-2">
              {["Features", "How It Works", "Events", "About", "Pricing"].map(
                (item, index) => (
                  <button
                    key={item}
                    onClick={() =>
                      scrollToSection(item.toLowerCase().replaceAll(" ", "-"))
                    }
                    className="w-full text-left text-gray-300 hover:text-cyan-400 px-4 py-3 text-base font-medium transition-all duration-300 hover:bg-gray-800/50 rounded-lg"
                  >
                    {item}
                  </button>
                )
              )}
            </div>

            {/* Mobile Auth Buttons */}
            <div className="pt-4 space-y-3 border-t border-gray-800/50">
              <Link
                href="/sign-in"
                className="block w-full text-center text-gray-300 hover:text-cyan-400 px-4 py-3 text-base font-medium transition-all duration-300 hover:bg-gray-800/50 rounded-lg"
              >
                Sign In
              </Link>
              <Link
                href="/sign-up"
                className="block w-full text-center bg-gradient-to-r from-cyan-500 to-purple-500 hover:from-cyan-600 hover:to-purple-600 text-white px-6 py-3 rounded-xl text-base font-medium transition-all duration-300 transform hover:scale-105 hover:shadow-xl hover:shadow-cyan-500/25 group"
              >
                <span className="flex items-center justify-center gap-2">
                  Get Started
                  <ArrowRightIcon className="w-4 h-4 group-hover:translate-x-1 transition-transform duration-300" />
                </span>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
}