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';
import { THeaderPage } from '../../type/app';
import { IMAGE_BASE_URL } from '../../api/config';
import Spinner from '../../Components/Utils/Loading/Spinner';
import SearchButton from '../../Components/Utils/Search/SearchButton';

const NavBarMenu = ({ data, isLoading }: THeaderPage) => {

  const [noDataFound, setNoDataFound] = useState(false);
  const [open, setOpen] = useState(false);

  return (
    <div className='menu_nav'>
      <WithDrawer
        title=''
        button={<Button icon={<MenuOutlined />} type='primary' />}
      >
        {({ closeDrawer }) => (
          <>
            <div className='header_logo'>
              {isLoading ? <Spinner /> :
                <img src={'/Logo/Logo.png'} alt='Logo' width={65} />
              }
            </div>
            <ul className='DrawerLinks'>
              <SearchButton setOpen={setOpen} setNoDataFound={setNoDataFound} />
              {HedaerLinksArray.map((drawerLink, index) => (
                <DrawerLink
                  isOnlyDrawer={drawerLink.isOnlyDrawer}
                  key={index}
                  href={drawerLink.href}
                  name={drawerLink.name}
                  closeDrawer={closeDrawer}
                  icon={<drawerLink.icon />}
                />
              ))}
            </ul>
          </>
        )}
      </WithDrawer>
    </div>
  );
}

export default NavBarMenu;
