import Image from "next/image";
import Link from "../Link";
import Menu from "../Menu";
import cn from "../../lib/helpers/classnames";
import * as config from "../../lib/config";
import type { ComponentPropsWithoutRef } from "react";

import avatarImg from "../../app/avatar.jpg";

export type HeaderProps = ComponentPropsWithoutRef<"header">;

const Header = ({ className, ...rest }: HeaderProps) => {
  return (
    <header
      className={cn(
        "bg-background-outer/70 border-kinda-light sticky top-0 z-[1000] h-24 w-full border-b backdrop-blur-[5px] backdrop-saturate-[180%] md:h-18",
        className
      )}
      {...rest}
    >
      <nav className="max-w-default mx-auto flex h-full w-full items-center justify-between px-5 py-3 md:py-5">
        <Link
          dynamicOnHover
          href="/"
          rel="author"
          aria-label={config.authorName}
          className="text-medium-dark hover:text-link flex flex-shrink-0 items-center hover:no-underline"
        >
          <Image
            src={avatarImg}
            alt={`Photo of ${config.authorName}`}
            className="border-light h-[70px] w-[70px] rounded-full border-2 md:h-[48px] md:w-[48px] md:border"
            width={70}
            height={70}
            quality={50}
            priority
          />
          <span className="mx-2.5 hidden text-lg leading-none font-medium tracking-[0.02em] md:block">
            {config.authorName}
          </span>
        </Link>

        <Menu className="ml-6 w-full max-w-64 sm:ml-4 sm:max-w-96 md:ml-0 md:max-w-none" />
      </nav>
    </header>
  );
};

export default Header;