import { useEffect, useRef } from "react";

/**
 * @param {{
 *   title: string,
 *   description?: string,
 *   eyebrow?: string
 * }} props
 */
export function PageHeader({ title, description, eyebrow }) {
  const headingRef = useRef(/** @type {HTMLHeadingElement | null} */ (null));

  useEffect(() => {
    document.title = `${title} · Frontend Skeleton`;
    headingRef.current?.focus();
  }, [title]);

  return (
    <header className="page-header">
      {eyebrow ? <p className="page-header__eyebrow">{eyebrow}</p> : null}
      <h1 ref={headingRef} tabIndex={-1} data-route-heading>
        {title}
      </h1>
      {description ? <p className="page-header__description">{description}</p> : null}
    </header>
  );
}