import { Link } from 'react-router'

import { MENU } from '~/data/menu'

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

export const HeaderMenu = () => {
  return (
    <div className="flex h-[60px] items-center justify-between bg-[#2E2F7C] text-xl font-medium text-white">
      {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>
  )
}