import { View } from "@react-pdf/renderer";
import { pdfFlags } from "../blocks/pdfProps";
import type { DecorItem } from "../blocks/FirstPageHeader";
import { DECOR_ID } from "../engine/ids";

/**
 * Fixed, page-anchored boxes painted BEFORE the flow, so the text of the flow sits on top of them: a panel the
 * numbers are printed on, watermarks, halftone dots. PageChrome's decor is painted after the flow and would
 * cover it. Render this as the first child of the Page.
 */
export function Underlay({ items }: { items: DecorItem[] }) {
  return (
    <>
      {items.map((d, i) => (
        <View key={i} id={DECOR_ID} style={{ position: "absolute", left: d.x, top: d.y, width: d.width, height: d.height }} {...pdfFlags({ fixed: true })}>
          {d.children}
        </View>
      ))}
    </>
  );
}