/**
 * Sticky reading header that appears when the article H1 scrolls out of view.
 *
 * Shows the article title and current section name in a thin fixed bar
 * at the top of the viewport. Uses CSS transform for slide-in/out animation.
 */

interface ReadingHeaderProps {
  /** Article title */
  title: string;
  /** Currently active section heading (from scroll-spy) */
  currentSection: string;
  /** Whether the header should be visible (H1 is out of viewport) */
  visible: boolean;
}

export default function ReadingHeader({ title, currentSection, visible }: ReadingHeaderProps) {
  return (
    <div
      className={`reading-header${visible ? " reading-header--visible" : ""}`}
      aria-hidden={!visible}
    >
      <div className="reading-header__inner">
        <span className="reading-header__title">{title}</span>
        {currentSection && (
          <>
            <span className="reading-header__separator">·</span>
            <span className="reading-header__section">{currentSection}</span>
          </>
        )}
      </div>
    </div>
  );
}