// File: src/components/UIX/NavBar/NavBar.jsx
// NavBar Component - Navigation bar for authentication pages

import React, { memo, useMemo } from "react";
import { Link } from "react-router";
import { useUIXTheme } from "../themes/useUIXTheme.jsx";
import Logo from "../Logo/Logo.jsx";

/**
 * NavBar Component - Performance Optimized
 * Navigation bar with logo and optional nav links
 *
 * @param {Array} links - Array of link objects { to, label, variant }
 * @param {string} logoSize - Logo size: 'sm', 'md', 'lg' (default: 'md')
 * @param {string} className - Additional CSS classes
 * @param {boolean} transparent - Use transparent background (default: false)
 * @param {React.ReactNode} children - Custom content to render on the right side
 */

const NavBar = memo(function NavBar({
  links = [],
  logoSize = "md",
  className = "",
  transparent = false,
  children,
}) {
  const { getThemeClasses } = useUIXTheme();

  const themeClasses = useMemo(
    () => ({
      bgCard: getThemeClasses("bg-card"),
      borderSecondary: getThemeClasses("border-secondary"),
      linkSecondary: getThemeClasses("link-secondary"),
    }),
    [getThemeClasses]
  );

  const navClasses = useMemo(() => {
    const baseClasses = transparent
      ? "backdrop-blur-sm"
      : `${themeClasses.bgCard}/95 backdrop-blur-sm border-b ${themeClasses.borderSecondary}`;
    return `${baseClasses} ${className}`.trim();
  }, [transparent, themeClasses, className]);

  const linkClasses = useMemo(
    () =>
      `text-base font-medium ${themeClasses.linkSecondary} transition-colors duration-200`,
    [themeClasses.linkSecondary]
  );

  const linksSection = useMemo(() => {
    if (children) return children;
    if (links.length === 0) return null;

    return (
      <div className="flex items-center space-x-6">
        {links.map((link, index) => (
          <Link key={index} to={link.to} className={linkClasses}>
            {link.label}
          </Link>
        ))}
      </div>
    );
  }, [links, linkClasses, children]);

  return (
    <nav className={navClasses}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center py-4 sm:py-6">
          <Logo size={logoSize} />
          {linksSection}
        </div>
      </div>
    </nav>
  );
});

NavBar.displayName = "NavBar";

export default NavBar;
