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

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

/**
 * Navigation Component - Performance Optimized
 * Header navigation bar with logo and optional action links
 *
 * Performance optimizations:
 * - Component memoization with React.memo
 * - Memoized theme classes
 * - Memoized className strings
 *
 * @param {React.Component} icon - Icon component for logo
 * @param {string} logoText - Text displayed next to logo
 * @param {string} logoLink - Link destination for logo (default: "/")
 * @param {Array} links - Array of link objects {to, text, variant}
 * @param {string} className - Additional CSS classes
 */
const Navigation = memo(function Navigation({
  icon: Icon,
  logoText = "MapleFile",
  logoLink = "/",
  links = [],
  className = "",
}) {
  const { getThemeClasses } = useUIXTheme();

  // Memoize theme classes
  const themeClasses = useMemo(
    () => ({
      bgGradientSecondary: getThemeClasses("bg-gradient-secondary"),
      textPrimary: getThemeClasses("text-primary"),
      linkSecondary: getThemeClasses("link-secondary"),
    }),
    [getThemeClasses],
  );

  // Memoize navigation className
  const navClassName = useMemo(() => {
    return `bg-white/95 backdrop-blur-sm border-b border-gray-100 ${className}`;
  }, [className]);

  // Memoize logo section
  const logoSection = useMemo(() => {
    return (
      <Link to={logoLink} className="flex items-center group">
        {Icon && (
          <div
            className={`flex items-center justify-center h-10 w-10 ${themeClasses.bgGradientSecondary} rounded-lg mr-3 group-hover:scale-105 transition-transform duration-200`}
          >
            <Icon className="h-6 w-6 text-white" />
          </div>
        )}
        <span className={`text-2xl font-bold ${themeClasses.textPrimary}`}>
          {logoText}
        </span>
      </Link>
    );
  }, [Icon, logoText, logoLink, themeClasses]);

  // Memoize links section
  const linksSection = useMemo(() => {
    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={`text-base font-medium ${
              link.variant === "primary"
                ? themeClasses.textPrimary
                : themeClasses.linkSecondary
            } transition-colors duration-200`}
          >
            {link.text}
          </Link>
        ))}
      </div>
    );
  }, [links, themeClasses]);

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

Navigation.displayName = "Navigation";

export default Navigation;
