import React from 'react';
import { Menubar, MenubarContent, MenubarMenu, MenubarTrigger } from '@/components/ui/menubar';
import MenuItem from './MenuItem';
import { menuConfig } from '@/config/menuConfig';

const AppMenu = ({ onMenuClick }) => {
  return (
      <div className="fixed top-0 left-0 right-0 z-50 bg-background border-b">
        <div className="flex items-center h-14">
          <div className="px-4 py-2 border-r h-full flex items-center">
            <img
                src="/img/logo.png"
                alt="testmaster"
                className="h-8 w-auto"
            />
          </div>
          <Menubar className="border-none flex-1">
            {menuConfig.map((menu) => (
                <MenubarMenu key={menu.id}>
                  <MenubarTrigger className="font-bold">
                    {menu.label}
                  </MenubarTrigger>
                  <MenubarContent>
                    {menu.items.map((item, index) => (
                        <MenuItem
                            key={item.id || `separator-${index}`}
                            item={item}
                            onMenuClick={onMenuClick}
                        />
                    ))}
                  </MenubarContent>
                </MenubarMenu>
            ))}
          </Menubar>
        </div>
      </div>
  );
};

export default AppMenu;
