import React from "react";
import { HeaderData } from "@/types/navigation";
import { TopBar } from "./TopBar";
import { Navbar } from "./Navbar";

interface HeaderProps {
  data: HeaderData;
}

export const Header: React.FC<HeaderProps> = ({ data }) => {
  // `contents` — without it, `<header>` becomes `Navbar`'s `position: sticky`
  // containing block, and since header's own height exactly equals
  // `TopBar + Navbar` (no slack), the sticky nav has no room to stay pinned
  // for more than a few px of scroll before its container's bottom edge
  // forces it to unstick again. `display: contents` removes header's own box
  // from layout so Navbar's containing block becomes `<body>` instead, which
  // spans the full page — giving it room to stay stuck the whole way down.
  return (
    <header className="sticky top-0 z-40">
      <TopBar data={data.topBar} />
      <Navbar data={data} />
    </header>
  );
};