import { Link, useRouteLoaderData } from 'react-router'

import HeaderMenuMobile from '~/layouts/news/header-menu-mobile'
import type { loader } from '~/routes/_layout'

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

export const HeaderMenu = () => {
  const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
  const menu = loaderData?.categoriesData

  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.id}
            to={`/category/${item.code}`}
            className={
              'flex h-full items-center justify-center border-r border-white px-[35px]'
            }
          >
            {item.name}
          </Link>
        ))}
        <HeaderSearch />
      </div>
      <HeaderMenuMobile menu={menu} />
    </>
  )
}