import React, { useRef } from 'react';
import { Link } from 'react-router-dom';
import { Menu, X } from 'lucide-react';
import { useClickOutside } from '../hooks/useClickOutside';

interface NavbarProps {
  isMobileMenuOpen: boolean;
  onMobileMenuToggle: () => void;
  onLinkClick?: () => void;
  renderMobileLinksOnly?: boolean;
  mobileMenuContent?: React.ReactNode;
}

export const navLinks = [
  { to: '/', label: 'Home' },
  { to: '/rooms', label: 'Rooms' },
  { to: '/about', label: 'About' },
  { to: '/contact', label: 'Contact' },
  { to: '/blog', label: 'Blog' },
];

const Navbar: React.FC<NavbarProps> = ({ 
  isMobileMenuOpen, 
  onMobileMenuToggle,
  onLinkClick,
  renderMobileLinksOnly = false,
  mobileMenuContent
}) => {
  const mobileMenuContainerRef = useRef<HTMLDivElement>(null);
  
  useClickOutside(mobileMenuContainerRef, () => {
    if (isMobileMenuOpen) {
      onMobileMenuToggle();
    }
  });
  
  const handleLinkClick = () => {
    if (onLinkClick) {
      onLinkClick();
    }
  };

  // If only rendering mobile links (for use inside Header's mobile menu container)
  if (renderMobileLinksOnly) {
    return (
      <>
        {navLinks.map((link) => (
          <Link
            key={link.to}
            to={link.to}
            onClick={handleLinkClick}
            className="px-4 py-3 text-white/90 
              hover:bg-[#d4af37]/10 hover:text-[#d4af37] 
              rounded-sm transition-all duration-300 
              border-l-2 border-transparent 
              hover:border-[#d4af37] font-light tracking-wide"
          >
            {link.label}
          </Link>
        ))}
      </>
    );
  }

  return (
    <div className="relative" ref={mobileMenuContainerRef}>
      {/* Desktop Navigation */}
      <nav className="hidden md:flex items-center space-x-1">
        {navLinks.map((link) => (
          <Link
            key={link.to}
            to={link.to}
            className="text-white/90 hover:text-[#d4af37] 
              transition-all duration-300 font-light px-4 py-2 
              relative group tracking-wide"
          >
            <span className="relative z-10">{link.label}</span>
            <span className="absolute inset-0 bg-gradient-to-r from-[#d4af37]/0 via-[#d4af37]/10 to-[#d4af37]/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          </Link>
        ))}
      </nav>

      {/* Mobile Menu Button */}
      <button
        onClick={onMobileMenuToggle}
        className="md:hidden p-2 rounded-sm 
          hover:bg-white/10 border border-transparent 
          hover:border-[#d4af37]/30 transition-all duration-300"
      >
        {isMobileMenuOpen ? (
          <X className="w-6 h-6 text-[#d4af37]" />
        ) : (
          <Menu className="w-6 h-6 text-white/90" />
        )}
      </button>

      {/* Mobile Menu Dropdown - Absolute positioned */}
      {isMobileMenuOpen && (
        <div 
          className="md:hidden absolute right-0 mt-2 w-64 
            bg-gradient-to-b from-[#1a1a1a] to-[#0f0f0f] 
            rounded-sm shadow-2xl py-2 border border-[#d4af37]/20 
            z-50 backdrop-blur-xl animate-fade-in max-h-[calc(100vh-120px)] 
            overflow-y-auto"
        >
          <div className="flex flex-col space-y-1">
            {navLinks.map((link) => (
              <Link
                key={link.to}
                to={link.to}
                onClick={handleLinkClick}
                className="px-4 py-3 text-white/90 
                  hover:bg-[#d4af37]/10 hover:text-[#d4af37] 
                  rounded-sm transition-all duration-300 
                  border-l-2 border-transparent 
                  hover:border-[#d4af37] font-light tracking-wide"
              >
                {link.label}
              </Link>
            ))}
            {mobileMenuContent && (
              <>
                <div className="border-t border-[#d4af37]/20 my-2"></div>
                {mobileMenuContent}
              </>
            )}
          </div>
        </div>
      )}
    </div>
  );
};

export default Navbar;

