import React from 'react';
import { Link } from 'react-router-dom';
import { Package } from 'lucide-react';
import { useActiveSection } from '@/hooks/useActiveSection';
import { iconMap } from '@/lib/nav-icons';

export function TopNav({ fullscreen = false }: { fullscreen?: boolean }) {
  const link = "inline-flex items-center gap-2 rounded-md px-3 py-2 hover:bg-accent hover:text-accent-foreground shadow-none hover:shadow-none focus:shadow-none focus:outline-none focus:ring-0";
  const active = "bg-secondary";
  const topClass = fullscreen ? 'top-16' : 'top-[calc(4rem+32px)]';
  const { main } = useActiveSection();

  // Get navigation tree from backend
  const navTree = window.WNW_NAV_TREE || [];

  return (
    <div data-mainmenu className={`border-b border-border sticky ${topClass} z-30 bg-background md:bg-background/95 md:backdrop-blur md:supports-[backdrop-filter]:bg-background/60`}>
      <div className="px-4 h-12 flex flex-nowrap overflow-auto items-center gap-2">
        {navTree.map((item: any) => {
          const IconComponent = iconMap[item.icon] || Package;
          const isActive = main.key === item.key;
          return (
            <Link
              key={item.key}
              to={item.path}
              className={`${link} ${isActive ? active : ''}`}
            >
              <IconComponent className="w-4 h-4" />
              <span className="text-sm font-medium">{item.label}</span>
            </Link>
          );
        })}
      </div>
    </div>
  );
}
