import Link from "next/link";
import React from "react";

export default function NavUI({ menu = [], color = "#fab758" }) {
  const filterHeaderMenu = (items) => {
    return items.filter(item => item.position === 'Header');
  };

  const renderMenu = (items, level = 0) => {
    if (level === 0) items = filterHeaderMenu(items);
    return items.map((item) => {
      const hasChildren = item.children && item.children.length > 0;
      const hasHref = !!item.href && item.href !== "#";
      if (hasChildren) {
        return (
          <li key={item.id} className={`nav-item dropdown${level > 0 ? " dropdown-submenu dropend" : ""}`}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              {hasHref && (
                <Link
                  className={`${level > 0 ? "dropdown-item" : "nav-link"} !text-[.7rem] !tracking-[normal] hover:!text-[var(--current-color)] after:!text-[var(--current-color)]`}
                  href={item.href}
                  style={{ paddingRight: 0 }}
                >
                  {item.label}
                </Link>
              )}
              <a
                className={`${hasHref ? "dropdown-toggle" : (level > 0 ? "dropdown-item" : "nav-link") + " dropdown-toggle"} !text-[.7rem] !tracking-[normal] hover:!text-[var(--current-color)] after:!text-[var(--current-color)]`}
                href="#"
                data-bs-toggle="dropdown"
                aria-expanded="false"
                style={hasHref ? { paddingLeft: 8, minWidth: 24 } : {}}
              >
                {hasHref ? <span className="sr-only">展开</span> : item.label}
              </a>
            </div>
            <ul className={`dropdown-menu${level > 0 ? " submenu" : ""}`}>
              {renderMenu(item.children, level + 1)}
            </ul>
          </li>
        );
      } else {
        return (
          <li key={item.id} className="nav-item">
            <Link
              className={`${level > 0 ? "dropdown-item" : "nav-link"} !text-[.7rem] !tracking-[normal] hover:!text-[var(--current-color)] after:!text-[var(--current-color)]`}
              href={item.href || "#"}
            >
              {item.label}
            </Link>
          </li>
        );
      }
    });
  };

  return (
    <ul className="navbar-nav" style={{ "--current-color": color }}>
      {renderMenu(menu)}
    </ul>
  );
}