import WithDrawer from '../../HighOrderComponent/WithDrawer';
import { Button } from 'antd';
import { MenuOutlined } from '@ant-design/icons';
import { HedaerLinksArray } from '../../data/HeaderLinks';
import DrawerLink from '../../Components/Ui/DrawerLink';

const HeaderMenu = () => {
  return (
    <div className='menu_nav'>
      <WithDrawer
        title=''
        button={<Button icon={<MenuOutlined />} type='primary' />}
      >
        {({ closeDrawer }) => (
          <>
            <div className='header_logo'>
              <img src='./Logo/MisbarLogo.png' alt='logo' className='logo_drawer' />
            </div>
            <ul className='DrawerLinks'>
              {HedaerLinksArray.map((drawerLink, index) => (
                <DrawerLink
                  isOnlyDrawer={drawerLink.isOnlyDrawer}
                  icon={<drawerLink.icon />}
                  key={index}
                  href={drawerLink.href}
                  name={drawerLink.name}
                  closeDrawer={closeDrawer}
                />
              ))}
            </ul>
          </>
        )}
      </WithDrawer>
    </div>
  );
}

export default HeaderMenu;
