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

import { Button } from '~/components/ui/button'
import { HeaderMenuMobile } from '~/layouts/news/header-menu-mobile'
import type { loader } from '~/routes/_news'

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

export const HeaderMenu = () => {
  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
  const menu = loaderData?.categoriesData?.sort((a, b) => {
    if (a.sequence === null) return 1
    if (b.sequence === null) return -1
    return a.sequence - b.sequence
  })

  return (
    <>
      <div className="hidden h-[60px] items-center justify-between bg-[#2E2F7C] text-xl font-medium text-white sm:flex">
        {menu?.map((item) => (
          <Button
            as={Link}
            key={item.id}
            to={`/category/${item.code}`}
            size="fit"
            className={
              'flex h-full items-center justify-center border-r border-white px-[35px] text-xl'
            }
          >
            {item.name}
          </Button>
        ))}
        <HeaderSearch />
      </div>
      <HeaderMenuMobile menu={menu} />
    </>
  )
}