/* eslint-disable @next/next/no-img-element */
import React from 'react';

import { useLocale } from 'next-intl';

import ButtonBlock from '@/components/header/ButtonBlock';
import MenuItem from '@/components/header/MenuItem';

import { mainMenuItems } from '@/config/menuItems';
import { Link } from '@/i18n/navigation';

import HamburgerButton from './HamburgerButton';

interface MenuBarProps {
  isMenuOpen: boolean;
  toggleMobileMenu: () => void;
}

const MenuBar: React.FC<MenuBarProps> = ({ isMenuOpen, toggleMobileMenu }) => {
  const locale = useLocale();
  const itemsForLocale = mainMenuItems.filter(
    (item) => !item.visibleLocales || item.visibleLocales.includes(locale)
  );

  return (
    <div className="w-full h-full flex items-center justify-between px-site">
      <div className="flex items-center gap-4 md:gap-6 xl:gap-10">
        <Link id="logo-bar" href="/" className="flex items-center">
          {/* medium icon - mobile & tablet */}
          <img
            className="w-[140px] h-8 object-cover object-top"
            alt="logo medium"
            src="/assets/images/logo/logo-large-notext.svg"
          />
          {/* large icon - desktop responsive */}
          {/* <img
            className="hidden lg:block h-[36px] xl:h-[44px] 2xl:h-[58px]"
            alt="logo large"
            src="/assets/images/logo/logo-large-wider-motto.svg"
          /> */}
        </Link>

        <div id="menu-bar" className="hidden lg:flex relative items-center">
          <nav className="flex items-center xl:gap-2 2xl:gap-3">
            {itemsForLocale.map((item) => (
              <MenuItem key={item.label} item={item} />
            ))}
          </nav>
        </div>
      </div>

      <div className="hidden lg:flex items-center gap-2 xl:gap-4 ml-2 xl:ml-8">
        <ButtonBlock />
      </div>

      <div className="flex items-center justify-center lg:hidden">
        <HamburgerButton isOpen={isMenuOpen} toggleMobileMenu={toggleMobileMenu} />
      </div>
    </div>
  );
};

export default MenuBar;