import { Link } from 'react-router'

import HeaderMenuMobile from '~/layouts/header-menu-mobile'

import { HeaderSearch } from './header-search'
import { MENU } from './menu'

export const HeaderMenu = () => {
  return (
    <>
      <div className="hidden h-[60px] items-center justify-between bg-[#2E2F7C] text-xl font-medium text-white sm:flex">
        {MENU.map((item) => (
          <Link
            key={item.title}
            to={item.url}
            className={
              'flex h-full items-center justify-center border-r border-white px-[35px]'
            }
          >
            {item.title}
          </Link>
        ))}
        <HeaderSearch />
      </div>
      <HeaderMenuMobile />
    </>
  )
}