import 'server-only';

import { Link } from '@theme/components';
import clsx from 'clsx';
import { ROUTES } from '@theme/routes';
import { menuGenerator } from '@akinon/next/utils';

import HeaderBand from './band';
import MobileHamburgerButton from './mobile-hamburger-button';
import MobileMenu from './mobile-menu';
import Navbar from './navbar';
import { getMenu } from '@akinon/next/data/server';
import { Image } from '@akinon/next/components/image';

export default async function Header() {
  const response = await getMenu({ depth: 3 });
  const menu = menuGenerator(response);

  return (
    <header className="relative">
      <div
        className={clsx([
          'grid',
          'mx-auto',
          'header-m-template-cols',
          'header-grid-template-areas',
          'border-b',
          'border-gray-100',
          'before:hidden',
          'before:absolute',
          'before:top-0',
          'before:left-0',
          'before:w-full',
          'before:bg-gray-100',
          'before:h-9',
          'before:z-[-1]',
          'before:content-[""]',
          'sm:grid-cols-3',
          'sm:container',
          'sm:before:block'
        ])}
      >
        <HeaderBand />
        <MobileHamburgerButton />
        <Link
          href={ROUTES.HOME}
          passHref={true}
          className="self-center block w-40 pl-3 header-grid-area-main-m sm:mt-9 sm:w-72 sm:justify-self-center sm:p-0"
          aria-label="Homepage"
        >
          <Image
            src="/logo.svg"
            alt="Project Zero"
            width={285}
            height={27}
            className="block w-full"
            style={{ height: 'auto', width: '100%' }}
            unoptimized
          />
        </Link>
        <MobileMenu menu={menu} />
        <Navbar menu={menu} />
      </div>
    </header>
  );
}