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

import { Button } from '~/components/ui/button'
import { APP } from '~/configs/meta'
import { useNewsContext } from '~/contexts/news'
import type { loader } from '~/routes/_layout'

export const HeaderTop = () => {
  const { setIsLoginOpen } = useNewsContext()
  const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
  const userToken = loaderData?.userToken
  const fetcher = useFetcher()

  return (
    <div className="flex h-[60px] items-center justify-between bg-white px-5 align-middle sm:h-[100px] sm:gap-[15px] sm:px-[50px] sm:py-[20px]">
      <Link
        to="/"
        className="mt-2 h-full py-2"
      >
        <img
          src={APP.logo}
          alt={APP.title}
          className="h-3/4 w-auto sm:h-full"
        />
      </Link>
      <div className="hidden h-full items-center py-1.5 font-light whitespace-pre-line sm:flex">
        {APP.description}
      </div>
      <div className="flex items-center gap-[15px]">
        <Button className="h-8 w-auto rounded-none px-3 text-xs sm:h-[50px] sm:w-[150px] sm:text-lg">
          About Us
        </Button>
        {userToken ? (
          <fetcher.Form
            method="POST"
            action="/actions/logout"
          >
            <Button
              variant="newsSecondary"
              className="hidden sm:block"
              type="submit"
            >
              Logout
            </Button>
          </fetcher.Form>
        ) : (
          <Button
            variant="newsSecondary"
            className="hidden sm:block"
            onClick={() => setIsLoginOpen(true)}
          >
            Masuk
          </Button>
        )}
      </div>
    </div>
  )
}